如何防止文本超出父div并实现多行省略？能否仅用Bootstrap实现？

需求与现状 #

需要避免过长文本撑大父div，同时在div高度范围内显示尽可能多的文本行。现有Bootstrap结构代码如下：

<div class="row g-0">
  <div class="col-md-3 align-content-center">
    <div class="d-flex justify-content-center">
      <!-- svg image -->
    </div>
  </div>
  <div class="col-md-9 align-content-center">
    <h5 class="card-title">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h5>
  </div>
</div>

期望实现3行文本截断效果：

|     | Lorem ipsum dolor |
| SVG | sit amet,         |
|     | consectetur ad... |

已尝试overflow: hidden;等CSS属性，未达到预期效果，询问是否有解决方案，能否仅通过Bootstrap类实现。

解决方案 #

Bootstrap没有原生的多行文本截断类，但可以通过Bootstrap辅助类配合少量自定义CSS实现需求：

1. 利用Bootstrap内置的overflow-hidden类隐藏超出容器的内容
2. 添加自定义CSS类，通过line-clamp属性控制显示行数

修改后的完整代码：

<style>
  /* 自定义多行截断类，控制显示3行 */
  .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }
</style>

<div class="row g-0">
  <div class="col-md-3 align-content-center">
    <div class="d-flex justify-content-center">
      <!-- svg image -->
    </div>
  </div>
  <div class="col-md-9 align-content-center">
    <h5 class="card-title overflow-hidden line-clamp-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit</h5>
  </div>
</div>

说明 #

• overflow-hidden是Bootstrap原生类，用于隐藏超出容器的内容
• 自定义的.line-clamp-3类让文本最多显示3行，末尾自动添加省略号，完全匹配你要的效果
• 若需要调整显示行数，只需修改-webkit-line-clamp的数值即可

如果要求完全不写自定义CSS，仅依赖Bootstrap原生类，目前无法实现该需求——Bootstrap官方并未提供多行文本截断的内置类。

内容的提问来源于stack exchange，提问作者Hi-tecX