如何用CSS将文本强制拆分为四行？line-clamp用法疑问

首先要明确：-webkit-line-clamp的作用是截断超过指定行数的文本并显示省略号，不是强制把短文本拆成指定行数。而且你的原代码缺少overflow: hidden，这是line-clamp生效的必要条件。

如果是要截断超过四行的文本 #

修正后的CSS如下：

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden; /* 必须添加这个属性，line-clamp才会生效 */
}

如果是要强制把短文本拆成四行显示 #

可以用以下两种方法：

方法一：固定高度+行高控制 #

通过设置容器总高度为4行的行高总和，让文本占满四行空间：

.line-clamp {
  line-height: 1.5; /* 可根据需求调整行高 */
  height: calc(1.5 * 4em); /* 总高度 = 行高 × 行数 */
  overflow: hidden;
  word-wrap: break-word; /* 避免长单词溢出 */
}

方法二：限制宽度强制换行 #

通过设置足够小的容器宽度，让文本自动拆分成四行，配合word-break强制拆分长单词：

.line-clamp {
  width: 70px; /* 根据文本内容调整宽度，直到刚好四行 */
  word-break: break-all;
}

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