[分享]css单行不换行线是省略号

在CSS中，我们常常会遇到一些文本内容比较长的情况，这时候就需要将文本进行折行处理以便展示。但是，可能有些情况下我们并不希望将文本折行，而是在一行内显示。这时候就需要用到 CSS 的单行不换行属性 ...

在CSS中，我们常常会遇到一些文本内容比较长的情况，这时候就需要将文本进行折行处理以便展示。但是，可能有些情况下我们并不希望将文本折行，而是在一行内显示。这时候就需要用到 CSS 的单行不换行属性 - text-overflow。

text-overflow 属性接受以下三个值：

text-overflow: clip; /* 不显示省略号，直接裁剪超出部分 */
text-overflow: ellipsis; /* 超出部分用省略号表示 */
text-overflow: string; /* 超出部分用自定义字符串表示 */ 

其中，text-overflow: clip; 可以让文本超出容器部分直接被裁剪掉，不会显示在屏幕上。而 text-overflow: string; 则可以自定义一个字符串作为超出部分的代替字符，比如 text-overflow: string('...'); 就可以将超出部分用三个点号替代。

最常用的还是 text-overflow: ellipsis;，它可以让文本超出容器部分时用省略号表示。这个属性需要和 white-space: nowrap; 和 overflow: hidden; 配合使用，将文本强制在一行内显示并且超出部分隐藏，才能生效。

.box {
  width: 200px;
  white-space: nowrap; /* 强制在一行内显示 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 超出部分用省略号表示 */
} 

注意，text-overflow 属性只对块级元素生效，而且只有在该元素的区域不足以容纳整个文本内容时才会生效。

使用 text-overflow 属性可以有效地解决一些文本折行导致布局混乱的问题，同时也可以增加页面内容的美感和可读性。