说明
text-overflow
样式有以下值:
- clip:默认值
- ellipsis:省略的部分,显示省略号。搭配
overflow: hidden
生效 - string:省略的部分,显示指定的字符串。搭配
overflow: hidden
生效
案例
如下图,超出的部分阶段,后面显示省略号
<style>
div{
width: 100px;
background-color: coral;
/* 文字不换行 */
white-space: nowrap;
/* 超出文字,后面显示省略号 */
text-overflow: ellipsis;
/* 超出部分隐藏,搭配 text-overflow 使用 */
overflow: hidden;
}
</style>
<div>
热评华硕灵耀14 2023:2.8K OLED高刷屏轻薄本
</div>