历史搜索

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

游客2024-09-21 12:03:01

先看一下样式:

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

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

HTML 代码

<div >
    -前端博客-前端教程-记录 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