【CSS文本溢出省略】使用CSS实现单行与多行文本溢出显示省略号

最新推荐文章于 2024-06-13 14:15:53 发布

Yamy~

最新推荐文章于 2024-06-13 14:15:53 发布

阅读量541

点赞数 15

分类专栏： web基础 # CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_47287750/article/details/135748234

版权

web基础同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

CSS

2 篇文章 0 订阅

订阅专栏

单行文本溢出显示…

.row {
  width: 100px; /* 设置宽度 */
  overflow: hidden; /* 超出隐藏 */
  white-space: nowrap; /* 设置文字单行显示，禁止换行 */
  text-overflow: ellipsis; /* 文本溢出时，显示... */
}

效果:
在这里插入图片描述

注意

如果要设置换行的话将white-space设置为normal而不是wrap，虽然某些浏览器会生效，但实际上不存在这个属性
如果是数字单词之类的文本，需要设置word-wrap: break-word

多行文本溢出显示…

.rows {
  display: -webkit-box; /* 将盒子设置为弹性伸缩盒子 */
  width: 100px; /* 限定宽度 */
  overflow: hidden; /* 超出隐藏 */
  -webkit-box-orient: vertical; /* 设置子元素排列方式 */
  -webkit-line-clamp: 3; /* 显示行数 */
}