[分享]css不换行超出显示省略号

在前端开发中，我们常常需要控制文字的显示效果，而文字的长短不尽相同，有时我们想要将长文字截断并显示省略号，这个时候就需要使用CSS不换行超出显示省略号的技巧。/ 单行文本溢出省略号 / overflo...

在前端开发中，我们常常需要控制文字的显示效果，而文字的长短不尽相同，有时我们想要将长文字截断并显示省略号，这个时候就需要使用CSS不换行超出显示省略号的技巧。

/* 单行文本溢出省略号 */
overflow: hidden;
text-overflow: ellipsis; /*省略号*/
white-space: nowrap; /*禁止换行*/

/* 多行文本溢出省略号 */
overflow : hidden;
text-overflow: ellipsis; /*省略号*/
display: -webkit-box; /*将块容器变为弹性伸缩盒子*/
-webkit-box-orient: vertical;/*指定排列方式为垂直方向*/
-webkit-line-clamp: 3; /*指定行数*/
/*如若需要兼容其他浏览器则需加上下面的代码*/
/* 设置为border-box是因为向弹性容器加 padding 是针对 content 生效 */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
        box-sizing: border-box;
/* 省略号样式 */
text-overflow: ellipsis;
-webkit-user-modify: read-write-plaintext-only;
-webkit-user-select: text; 

以上代码解释：

首先，为了让文本不自动换行，我们需要设置white-space属性为nowrap；然后，我们使用overflow：hidden将文本内容部分截断并隐藏。最后，我们通过text-overflow：ellipsis添加省略号的显示效果。

如果是多行文本，我们需要将容器指定为弹性盒子，并通过-webkit-line-clamp属性限制显示几行。同时，为了避免在容器中产生一些引起干扰的元素，我们需要设置盒子模型为border-box。替换文本只能通过webkit user modify样式实现，所以我们需要添加-webkit-user-modify和-webkit-user-select属性。

综上所述，使用CSS不换行超出显示省略号技巧，可以很好地控制文字显示效果，让页面更加美观。