微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

css三行省略号更多

在CSS中,如果想要把文本省略号形式展示,可以使用text-overflow属性。它提供了三种值:clip、ellipsis和string。

css三行省略号更多

其中,ellipsis表示使用三个点来代替未显示内容。在实际应用中,通常需要设置一个固定宽度,然后使用以下代码实现:

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: Nowrap;

这三行代码会将超出宽度的文本隐藏,同时在结尾处用“...”代替。其中,white-space: Nowrap会强制一行显示,否则“...”会在下一行显示

如果想要更多的省略号,可以在前面加上若干个空格,让其超出宽度。例如:

  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: Nowrap;

而文本则可以这样写:

  前面很多空格……剩下的内容

这样就可以实现更多的省略号效果了。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。