文字超出宽度后显示 ... 效果

CSS/设计
486
0
0
2022-10-14
标签   Css实践

原效果:

文字超出后宽度后显示 ... 效果

实现效果:

文字超出后宽度后显示 ... 效果

代码:

<div> 打败苹果,十年巨亏,全球在线音乐第一股的转型之痛</div>

<style>
    div{
        width: 200px;
        white-space: nowrap; /* 文本不换行 */ 
        overflow: hidden; /* 超出部分隐藏 */ 
        text-overflow: ellipsis; /* 文字超出部分显示为 ... */
    }
</style>