文本溢出显示省略号之css

Posted 2022-11-01 杨晓风-linda

导语

积少成多，聚沙成塔，不断汲取经验，增长自身

需求

在有限的空间内，商品卡片标题一般会提出当文本溢出时显示省略号，而溢出的情况通常为两种：

1. 单行文本溢出
2. 多行文本溢出 （具体是在第几行根据具体业务而决定）

 

技术方案

1.单行文本裁剪

overflow: hidden;（文字长度超出限定宽度，则隐藏超出的内容）
white-space: nowrap;（设置文字在一行显示，不能换行）
text-overflow: ellipsis;（规定当文本溢出时，显示省略符号来代表被修剪的文本）

2.多行文本裁剪

-webkit-line-clamp: 2;（用来限制在一个块元素显示的文本的行数，2 表示最多显示 2 行。为了实现该效果，它需要组合其他的 WebKit 属性）
display: -webkit-box;（和 1 结合使用，将对象作为弹性伸缩盒子模型显示 ）
-webkit-box-orient: vertical;（和 1 结合使用 ，设置或检索伸缩盒对象的子元素的排列方式 ）
overflow: hidden;（文本溢出限定的宽度就隐藏内容）
text-overflow: ellipsis;（多行文本的情况下，用省略号 “…” 隐藏溢出范围的文本)

方案解读

1.使用多行文本裁剪的方式实现单行文本裁剪的要求

在实际的开发过程中，最一开始使用的是多行文本裁剪的方式，只不过将-webkit-line-clamp设置为1，在安卓情况下可实现单行文本裁剪的要求，但在ios下，样式混乱，如下图所示：

 解决方案还是采用单行文本裁剪的方案去实现

2.使用单行文本裁剪的方式也需要注意宽度的设置

最一开始直接更换单行文本裁剪的方案，但是发现实际展示时，文本出现了相互覆盖的情况： 

此时设置了宽度，文本迎刃而解：

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: inherit;