2020.3.25.第七天

<!--  

1:空白空间的处理

        white-space:;

            pre

            pre-wrap

            pre-line

            inherit继承!

            nowrap不让文本换行


2:溢出属性(控制内容溢出时候的显示方式):

overflow属性:

auto当内容超出的时候有滚动条,没有超出的时候没有滚动条

scroll添加滚动条

hidden溢出隐藏!

inherit继承!


拓展:

            overflow-x : hidden;

            overflow-y : hidden;



3:text-overflow:ellipsis/clip

ellipsis省略号显示

clip没有省略号


控制单行文本,溢出省略号显示:

1:white-space:nowrap;   不换行

2:overflow:hidden;    溢出的内容隐藏。

3:text-overflow:ellipsis  溢出的内容省略号显示

4:容器要有宽度!!!

-->

构建一个方法:(单行文本多余字数省略)

方法名{

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;

}

<!--  

新闻列表的流程:

1:结构:

a:如果新闻后面有时间:

                <li>

<a href="#">新闻条新闻条新闻条新闻条新闻条</a>

                    <span>2020-03-25</span>

                </li>

b:如果没有时间

                <li>

<a href="#">新闻条新闻条新闻条新闻条新闻条</a>

                </li>


2:给li添加宽高,高度量取的时候,量行高就行。

3:给新闻内容a  和 时间的span  添加浮动。一左一右

4:设置文本样式。

5:用添加背景图的形式 给 li添加列表符号

6:让背景图 上下居中,文本上下居中

7:给li添加padding-left  把列表符合露出来。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容