如何用HTML/CSS实现可换行、达最大高度后自动省略的标签

要做这种固定宽度、文本自动换行到指定高度后自动截断的标签，用CSS就能直接实现，核心是利用多行文本截断的属性组合，下面是具体方案：

核心实现思路 #

通过CSS属性组合控制：固定宽度 + 限制最大行数（对应最大高度） + 超出内容隐藏并添加省略号。关键是要让line-height和max-height匹配——max-height等于line-height乘以你允许的最大行数，这样就能精准控制文本填满高度后再截断。

完整代码示例 #

HTML #

<div class="fixed-truncated-label">This label has a lot of text that can wrap up to a certain height and then it will eventually get truncated with an ellipsis.</div>
<div class="fixed-truncated-label">This text doesn't need to elide.</div>

CSS #

.fixed-truncated-label {
  width: 240px; /* 固定宽度，对应示例里的框宽 */
  line-height: 1.5em; /* 设置行高 */
  max-height: 6em; /* 1.5em × 4行 = 6em，对应最大高度 */
  display: -webkit-box;
  -webkit-line-clamp: 4; /* 最多显示4行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid #000; /* 模拟示例中的边框 */
  padding: 8px;
  box-sizing: border-box;
}

效果说明 #

• 当文本内容超过设定的4行时，会自动截断并在末尾显示省略号，和你给出的长文本示例效果一致
• 文本内容不足4行时，会正常换行显示，不会出现多余的省略号，匹配短文本的需求

兼容性补充 #

• Chrome、Safari、Edge等现代浏览器完美支持这套属性
• Firefox 68及以上版本支持标准的line-clamp: 4，可以和-webkit前缀属性同时写做兼容
• 若需兼容IE（现在几乎不需要），可以用JS计算文本行数后手动添加省略号，但不推荐

内容的提问来源于stack exchange，提问作者Ethan G