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 单位的了解

以上关于CSS设置文字固定个数显示超出后省略…的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。