底部内边距场景下span元素溢出隐藏问题求助

要解决这个问题，核心是先让span元素支持上下内边距，再实现文本的多行截断隐藏第四行，具体可以用两种方法：

方法一：使用-webkit-line-clamp实现带省略号的截断 #

修改.noticia的CSS样式：

.noticia {
  display: inline-block; /* 将行内span转为行内块，支持上下padding */
  padding: 10px; /* 设置你需要的内边距值 */
  width: 200px; /* 固定宽度确保内容换行到第四行 */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 限制只显示3行，自动隐藏第4行 */
  -webkit-box-orient: vertical;
}

方法二：通过max-height+line-height实现无省略号的截断 #

如果不需要末尾的省略号，可以用行高计算最大高度来隐藏超出内容：

.noticia {
  display: inline-block;
  padding: 10px;
  width: 200px;
  line-height: 1.5em; /* 设定行高 */
  max-height: 4.5em; /* 3行总高度 = 行高 × 3 */
  overflow: hidden;
}

关键说明 #

• span默认是行内元素，上下padding不会生效，转为inline-block后就能正常识别内边距。
• 必须设置固定宽度，否则内容不会自动换行，也就不存在需要隐藏的第四行。

内容的提问来源于stack exchange，提问作者Diogo Amaral