css只显示4个字 |好玩的css网页源码

css主题整合，好看表单css，距底部距离css代码，css 部分的整体平移，a标签怎么写css样式，css里图片拉伸高固定，好玩的css网页源码

.text {
width: 100px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

上述代码表示，当 .text 元素中的文本内容超出 100px 时，隐藏超出的部分，并用省略号表示。但如果大家想要显示前面的 4 个字，该怎么办？可以使用 CSS 的伪元素

::before

和

content

属性来实现：

.text::before {
content: attr(data-text);
}
.text {
width: 100px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

上述代码中，大家将要显示的文本内容通过

data-text

属性传递给了伪元素

::before

，然后用 CSS 控制这个伪元素的样式，使它在 .text 元素之前显示指定的文本内容。

使用上述代码，可以实现只显示 4 个字的效果。但需要注意的是，这种做法并不适用于所有情况，因为在不同的浏览器和设备上，文字的显示效果可能会有所不同。