【css】超过文本显示省略号_css超出省略

作者：小小林熬夜学编程 | 2024-02-20 17:36:07

踩

css超出省略

显示省略号的前提：必须有指定宽度

一、单行文本超出部分显示省略号

属性	取值	解释
overflow	hidden	当内容超过盒子宽度, 隐藏溢出部分
white-space	nowrap	让文字在一行内显示, 不换行
text-overflow	ellipsis	如果溢出的内容是文字, 就用省略号代替


.one-line{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

二、多行文本超出部分显示省略号

属性	取值	解释
overflow	hidden	当内容超过盒子宽度, 隐藏溢出部分
text-overflow	ellipsis	如果溢出的内容是文字, 就用省略号代替
display	-webkit-box	必须设置盒子属性为-webkit-box
-webkit-line-clamp	2、3、4…	设置超出几行后，超出部分显示省略号注：这是一个不规范的属性（unsupported WebKit property）
-webkit-box-orient	vertical	盒子实现多行显示的必要条件，文字垂直展示
word-break	break-all	单词破坏：主要用于破坏英文单词的整体性，即在英文单词还没有在一行完全展示时就换行。简单的理解就是一个单词可能会被分成两行展示


.two-line{
  overflow:hidden;
  text-overflow: ellipsis;
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient:vertical;
  -moz-box-orient:vertical;
  word-break: break-all;
}

说明：

-webkit-line-clamp 可以把块容器中的内容限制为指定的行数，它只有在 display设成 -webkit-box 或 -webkit-inline-box 并且 -webkit-box-orient设成 vertical 时才有效果。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/120457?site