文本截断

将长文本截断并用省略号代替。

对于超长的内容,你可以通过添加 .text-truncate 类将文本截断并添加省略号。需要设置 display: inline-blockdisplay: block 属性。

这段文字很长,一旦显示就会被截断。
这段文字很长,一旦显示就会被截断。
<!-- Block level -->
      <div class="row">
        <div class="col-2 text-truncate">
          这段文字很长,一旦显示就会被截断。
        </div>
      </div>

      <!-- Inline level -->
      <span class="d-inline-block text-truncate" style="max-width: 150px;">
        这段文字很长,一旦显示就会被截断。
      </span>