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

原效果:

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

实现效果:

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

代码:

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

<style>
    div{
        width: 200px;
        white-space: nowrap; /* 文本不换行 */
        overflow: hidden; /* 超出部分隐藏 */
        text-overflow: ellipsis; /* 文字超出部分显示为 ... */
    }
</style>
本作品采用《CC 协议》,转载必须注明作者和本文链接
敢于争先 @ 不正
讨论数量: 1

如果你是一个后端,不需要手写CSS,引入一个UI库就行了,把重点放到后端上

1周前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!