css教程:text-overflow: ellipsis超出文字显示省略号

说明

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>

原文出处:https://malaoshi.top/show_1IX5WgZB8Cu1.html