bootstrap5文字截断，超出部分显示省略号，多行文字截断

这个业务逻辑多少都有点奇怪了，阅读浏览次数增值在新闻详情页的控制器方法里setInc，这怎么还写进模型事件里了。如果非要用onAfterRead也可以，把新闻文章的内容单独分出来一个news_content表，然后把它和news做关联，然后给news_content表的onAfterRead事件做增值处理，这样点进新闻页内查询到文章内容时才会触发它。: 评 TP6模型事件-查询后onAfterRead不好用

文章标签更多

ThinkPHP (254)

Mysql (58)

DedeCms (33)

jQuery (67)

证件照 (1)

尺寸大小 (2)

背景颜色 (1)

setInc (4)

setDec (4)

onclick (5)

友情链接更多

超纯水设备

免费设计

海报设计

快递查询

text-overflow: ellipsis bootstrap5 text-truncate

打开边栏(ESC) 关闭边栏(ESC)

bootstrap5对于较长的内容，可以添加.text-truncate类别，以省略号截断文字。需为display: inline-block或是display: 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>

如图：

from clipboard

.text-truncate样式

.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

如果想实现两行或三行文字截断呢

自定义.text-truncate-2，可以截取两行文字显示省略号，不过与d-inline-block等有冲突

.text-truncate-2{
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

html

<span class="text-truncate-2" style="max-width: 150px; min-height: 40px;">
  Praeterea iter est quasdam res quas ex communi.Praeterea iter est quasdam res quas ex communi.Praeterea iter est quasdam res quas ex communi.
</span>

如图：

from clipboard

注意：当ellipsis和display:block同时应用时，ellipsis会失效，其实是overflow:hidden和display:bock冲突，分两个div应用就可以解决这个问题

<div class="mb-0 d-none d-lg-block">
  <span class="text-truncate-2" style="max-width: 150px; min-height: 40px;">
    Praeterea iter est quasdam res quas ex communi.Praeterea iter est quasdam res quas ex communi.Praeterea iter est quasdam res quas ex communi.
  </span>
</div>

赏

前一篇

bootstrap5 按钮大小

后一篇

bootstrap5实现左右居中 .mx-auto

相关推荐

bootstrap5 横线(水平线)hr的使用

Bootstrap5 | 2022-06-15 4022

bootstrap5 横线(水平线)hr的使用 css样式： hr { margin: 1rem 0; color: inherit; background-color: currentColor; border: 0; opacity: 0.25; } hr:not([size]) { heigh...

bootstrap5 实现col右对齐

Bootstrap5 | 2021-10-27 3613

实现效果：搜索框右对齐方式一：由于bootstrap5 列构建在网格的弹性盒子体系结构上，所以我们直接使用flex布局样式.justify-content-end，控制右对齐 <div class="container"> <div class="row justify-content-end...