如何用CSS实现固定宽度多行文本超110字符后显示省略号

需求：固定宽度容器内的多行文本，当内容超过110字符时自动显示省略号（...）。现有代码因使用white-space: nowrap仅支持单行省略，无法满足多行需求，以下是修改方案：

修改后的代码 #

HTML（无需改动） #

<div class="course-preview-body">
  <p class="course-preview-header">{{competency.title}}</p>
  <p class="product-preview-description">{{{competency.overview.statement.text}}}</p>
</div>

CSS（关键修改部分） #

.course-preview-body {
    padding: 20px 15px 15px;
    border-bottom-left-radius: 4px;
    font-size: 14px;
    height: 100px;
    /* 给容器设置固定宽度，按需调整数值 */
    width: 300px; 

    .course-preview-header {
      color: #000;
      font-weight: 700;
      margin-bottom: 5px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap; /* 标题保持单行省略，无需修改 */
    }

    .product-preview-description {
      overflow: hidden;
      text-overflow: ellipsis;
      /* 启用多行省略的核心属性 */
      display: -webkit-box;
      -webkit-box-orient: vertical;
      /* 按110字符估算显示行数，可根据实际排版调整 */
      -webkit-line-clamp: 4;
      /* 限制最大宽度为110字符宽度，精准触发字符数阈值 */
      max-width: 110ch;
      /* 移除单行限制，允许文本换行 */
      white-space: normal;
    }
  }

核心修改说明 #

1. 移除.product-preview-description的white-space: nowrap属性，让文本支持多行换行
2. 通过display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp组合实现多行文本省略效果（主流浏览器均支持该webkit内核方案）
3. 使用max-width: 110ch限制文本最大宽度（1ch对应一个字符的宽度），确保内容超过110字符时触发省略逻辑
4. 配合-webkit-line-clamp控制显示行数，避免文本溢出容器高度

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