bootstrap5文字截断,超出部分显示省略号,多行文字截断
taotaoit Bootstrap5 2021-09-14 32 0
关于本站

本人承接php网站维护,病毒查杀,网站编辑,网站改版,html制作

有需要网站维护,改版,病毒查杀,网站编辑,网站备案,html制作等相关的工作可以联系我。
本人有多年相关工作经验,也可提供免费咨询,交个朋友。
有需要探讨问题的朋友,也可以加我微信,共同探讨!
微信:15011482830 QQ:408917339

1695809 1607 17
最新评论
报错 in promise) MiniProgramError {"errMsg":"removeTabBarBadge:fail not TabBar page"} Object
评 人人商城小程序昵称变成了“微信用户”头像也不显示?getUserInfo换成getUserProfile
按照这个修改后报错: ReferenceError: n is not defined at success (index.js? [sm]:3) at Function.forEach.u.<computed> (VM10210 WAService.js:2) at :55237/appservice/<api login success callback function> at Object.success (VM10210 WAService.js:2) at r (VM10210 WAService.js:2) at VM10210 WAService.js:2 at w (VM10210 WAService.js:2) at VM10210 WAService.js:2 at VM15 asdebug.js:1 at I (VM15 asdebug.js:1)(env: Windows,mp,1.05.2105170; lib: 2.17.0)
评 人人商城小程序昵称变成了“微信用户”头像也不显示?getUserInfo换成getUserProfile
asfdsafasdf
评 ;!function(){}();
:kaixin:
评 thinkphp 3.2.3 Runtime\Logs日志文件太多怎么关闭日志功能
其他浏览器呢
评 对服务器的请求已遭到某个扩展程序的阻止
文章标签更多
ThinkPHP (163)
Mysql (35)
DedeCms (33)
jQuery (41)
证件照 (1)
setInc (3)
setDec (3)
onclick (4)
打开边栏(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 .me-auto .ms-auto .mx-auto和bootstrap4 .ml-auto .mr-auto
Bootstrap5 | 2021-08-04 146
bootstrap5 .me-auto .ms-auto是什么意思? 先看css样式 bootstrap5 .ms-auto元素居右 .me-auto元素居左 .ms-auto{margin-left:auto!important} .me-auto{margin-right:auto!important} .m...
bootstrap5 .mt-auto .mb-auto .my-auto
Bootstrap5 | 2021-08-04 109
css样式 .mt-auto{margin-top:auto!important} .mb-auto{margin-bottom:auto!important} .my-auto{margin-top:auto!important;margin-bottom:auto!important}
评论:0条
评论加载中...
发表评论