文本溢出省略号表示

文本溢出省略号表示

老铁们今天详细说一个在网页中有好多地方用到的组合属性——单行文本溢出用省略号代替：
例如下图：

文本溢出.png

我们浏览网页的时候经常可以看到当一行标题放不下就会有...来代替后面的文字；我们可以用几个组合属性来实现；

要实现溢出时产生省略号的效果还需定义：

1.容器宽度：width:value;（px、%，都可以）
2.强制文本在一行内显示：white-space:nowrap;
3.溢出内容为隐藏：overflow:hidden;
4.溢出文本显示省略号： text-overflow:ellipsis;

现在我们讲这几个 属性分别介绍一下：
1、overflow属性：定义溢出元素内容区的内容会如何处理

语法：overflow:visible/hidden/scroll/auto/inherit;

说明：
visible：默认值，内容不会被修剪，会出现在元素框之外；
hidden：内容会被修剪，并且其余内容是不可见的；
scroll：内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容；
auto：如果内容被修剪，则浏览器会显示滚动条，以便查看其他的内容；
inherit：规定应该从父元素继承overflow属性的值。

2、white-space属性：设置如何处理元素内的空白

语法：white-space:normal/pre/nowrap/pre-wrap/pre-line/inherit;

说明：
normal：默认。空白会被浏览器忽略；
pre：空白会被浏览器保留；
nowrap：文本不会换行，文本会在同一行上继续，直到遇到
标签为止；
pre-wrap：保留空白符序列，但是正常地进行换行；
pre-line：合并空白符序列，但是保留换行符；
inherit：规定应该从父元素继承white-space属性的值。

3、text-overflow属性：规定当文本溢出包含元素时发生的事情

语法：{text-overflow:clip/ellipsis;}

说明：
clip：不显示省略号，而是简单的裁切;
ellipsis：当对象内文本溢出时，显示省略标记；