bootstrap4如何把长文字限定在一行显示并自动截取

 剑鱼论坛 发表于 2020年01月17日 CSS/CSS3  383
剑鱼论坛
LV 8 研究生
最后在线:2年前
加入时间:5年前
主帖:143  跟帖:100

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
剑鱼论坛