标签：使用 问题 如何 弹性 页面布局 bug lamp amp 保留
这里记录下如何用CSS实现单行、多行文本溢出容器的时候用省略号代替溢出部分。
单行文本溢出容器时显示省略号的CSS实现方法
/* 规定当内容溢出元素框（容器）时隐藏 */ overflow: hidden; /* 规定当文本溢出包含元素（容器）出现省略号 */ text-overflow: ellipsis; /* 规定段落中的文本不进行换行 */ white-space: nowrap;
要注意的是，因为是要在文本溢出容器时候显示省略号，因此容器是需要有固定的宽度的。
在上面的示例中，后面的85646464654495467417个哈哈哈都被省略成省略号了。
然后我们来对这些属性和值逐个分解。
overflow
overflow属性规定当内容溢出元素框时发生的事情。
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承overflow属性的值，IE不支持这个值。 |
这里使用的是hidden。
text-overflow
text-overflow属性规定当文本溢出包含元素时发生的事情。
| 值 | 描述 |
|---|---|
| clip | 默认值。修剪文本。 |
| ellipsis | 显示省略符号来代表被修剪的文本。 |
| string | 使用给定的字符串来代表被修剪的文本。 |
这里使用的是ellipsis，是显示省略号的重点。
white-space
white-space属性规定如何处理元素内的空白。
| 值 | 描述 |
|---|---|
| normal | 默认值。空白会被浏览器忽略。 |
| pre | 空白会被浏览器保留。其行为方式类似HTML中的<pre>标签。 |
| nowrap | 文本不会换行，文本会在在同一行上继续，直到遇到<br>标签为止。 |
| pre-wrap | 保留空白符序列，但是正常地进行换行。 |
| pre-line | 合并空白符序列，但是保留换行符。 |
| inherit | 规定应该从父元素继承white-space属性的值，IE不支持这个值。 |
这里使用的是nowrap。
多行文本溢出容器时显示省略号的CSS实现方法
overflow: hidden; /* 用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性，比如下面的两个 */ -webkit-line-clamp: 3; /* 必须结合的属性，将对象作为弹性伸缩盒子模型显示 */ display: -webkit-box; /* 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式，这里是垂直 */ -webkit-box-orient: vertical;
多行这个用的是Webkit的CSS扩展属性，因此只兼容Webkie内核的浏览器，实际场景基本用不上（我没有用过所以这么说，网上找的，嘻嘻）。
同时这些扩展属性也比较新，不知道有没有什么稀奇古怪的Bug（柠檬酸），已知的一个问题是即使末行文本未超出行的情况下也会出现省略号。因此建议还是想想别的折衷方法，比如修改页面布局配合其他CSS属性实现或用JavaScript实现。
"跟雨伞学做人，如果你不为别人挡风遮雨，谁又会把你高高举在头上。"
标签：使用 问题 如何 弹性 页面布局 bug lamp amp 保留
原文地址：https://www.cnblogs.com/yanggb/p/11314036.html
