Bootstrap5 文本截断(Text truncation)

半兽人 发表于: 2020-07-17   最后更新时间: 2021-04-16 09:05:45  
{{totalSubscript}} 订阅, 2,413 游览

对于很长的内容,可以添加.text-truncate用省略号来截断文本。需要display:inline-blockdisplay:block

<!-- Block level -->
<div class="row">
  <div class="col-2 text-truncate">
    Praeterea iter est quasdam res quas ex communi.
  </div>
</div>

<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 150px;">
  Praeterea iter est quasdam res quas ex communi.
</span>

在线运行

更新于 2021-04-16
在线,1小时前登录

得運電子 7月前

这里如何与文本省略点击显示全部相结合呢?

半兽人 -> 得運電子 7月前

回复你了,根据event来添加和删除css。
参考:bootstrap5文本省略点击显示全部

查看bootstrap5更多相关的文章或提一个关于bootstrap5的问题,也可以与我们一起分享文章
提问