CSS设置文字固定个数显示超出后省略…

先看一下样式：

产品要求最多显示7个字，超出这个范围则以省略号…显示。

HTML代码

<div class="text">
    码云笔记-前端博客-前端教程-记录web前端开发的个人技术博客
</div>

CSS代码

.text {
    /* 超出7个字隐藏，之所以设置8em是因为省略号占一个位置 */
    width: 8em;
    overflow: hidden;
    /* 显示省略符号来代表被修剪的文本。 */
    text-overflow:ellipsis; 
    /* 文本不换行 */
    white-space:nowrap;
}

以上就是关于CSS设置文字固定个数显示超出后省略号… 显示的方法，其实也很简单，相信大家都会，我只是很长时间不用一些属性，回忆起来记录一下。

推荐阅读：
常用的CSS 字体单位：px、em、rem 和 % 看这篇就够了
视口百分比长度vh、vw、vi、vb、vmin、vmax单位的了解