bootstrap4的使用是很方便的,这种方便体现在很多方面,现在我们将介绍其中一个,就是假设我有一段很长的文字需要显示在页面,但是为了排版好看,我又不希望这段文字全部显示在页面上,而仅仅显示到某一行,这行显示不下的文字自动用省略号来表示,说明后面还有没有显示出来的内容。
举个例子来说,假设我们有以下的文字内容:
剑鱼论坛很好用,操作和管理都很简单有效,我很喜欢剑鱼论坛,我也会推荐别人使用。
上面这段文字比较长,假设我们能够容纳文字的元素长度不够,并且我们不希望文字分成两行显示,如下:
剑鱼论坛很好用,操作和管理都很简单有效,我很喜欢剑鱼论坛...
我们需要实现的就像上面这样,显示不下的文字使用省略号来表示。
我们使用bootstrap4的话,要实现这样的效果很简单,只需要加一个样式类就可以了。代码如下:
<div class="row">
<div class="col-2 text-truncate">
剑鱼论坛很好用,操作和管理都很简单有效,我很喜欢剑鱼论坛,我也会推荐别人使用。
</div>
</div>
我们在文字所在的div加上了“text-truncate”样式,这样就可以实现我们的需求了,每当文字长度超出div时就会自动截取。
好了,bootstrap4自动截取文字的使用介绍完了。
论坛主帖
288
论坛跟帖
316
在线访客
0
今日主帖
0
今日跟帖
0
今日注册
0
84
http://jianyuluntan.com/gentie.html
http://jianyuluntan.com/postzan.html
http://jianyuluntan.com/postcai.html
http://jianyuluntan.com/postshoucang.html
http://jianyuluntan.com/gentiezan.html
http://jianyuluntan.com/gentiecai.html
http://jianyuluntan.com/huifu.html
http://jianyuluntan.com/xiugai.html
http://jianyuluntan.com/shanchugentie.html
1
cmVsZWFzZV8w
0
© 2019 - 2024 剑鱼论坛 版权所有
Powered by JianYuLunTan
976666861
http://jianyuluntan.com/feedback.html
http://jianyuluntan.com/qiandao.html
http://jianyuluntan.com/denglu.html
0
http://jianyuluntan.com/adenglu.html
0