[分享]css制作文字省略样式

CSS的文本省略样式是一种非常方便的技术，可以使长字符串在宽度不够的情况下自动省略，并显示省略号。实现起来也很简单，下面我们来介绍。/ 将文字超出宽度的部分用省略号代替 / .textellipsis...

CSS的文本省略样式是一种非常方便的技术，可以使长字符串在宽度不够的情况下自动省略，并显示省略号。实现起来也很简单，下面我们来介绍。

/* 将文字超出宽度的部分用省略号代替 */
.text-ellipsis {
   white-space: nowrap; /* 不换行 */
   overflow: hidden; /* 超出部分隐藏 */
   text-overflow: ellipsis; /* 用省略号代替超出部分 */
} 

上述代码中，我们使用了white-space属性禁用了文字换行，使用overflow属性隐藏了超出宽度的部分，最重要的是使用了text-overflow属性将超出部分用省略号代替。

当然，有时候我们需要保留文字的一部分，在一定程度上避免省略带来的信息不足的问题。这时候我们可以采用以下代码。

/* 将文字前面的部分用省略号代替 */
.text-ellipsis {
   display: -webkit-box; /* 开启弹性盒子布局，支持-webkit-内核的浏览器 */
   -webkit-line-clamp: 2; /* 显示2行 */
   -webkit-box-orient: vertical; /* 垂直排列 */
   overflow: hidden;
   text-overflow: ellipsis;
} 

上述代码中，我们使用了display属性开启了弹性盒子布局，使用了-webkit-line-clamp属性限制了文本行数，并使用-webkit-box-orient属性设置了弹性盒子垂直排列。这样，如果文字超过2行，就会在第2行末尾加上省略号。

总之，CSS的文本省略样式对于排版和优化页面非常有帮助，掌握这些技巧能够提高我们的工作效率，让网页更加美观。