900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > 使用CSS样式设置文本超出2行显示为省略号

使用CSS样式设置文本超出2行显示为省略号

时间:2019-05-28 08:20:48

相关推荐

使用CSS样式设置文本超出2行显示为省略号

设置文本超出2行显示为省略号

在设计前端页面中,我们经常会遇到文本太长导致超出规定区域的情况。

我们只需要在文本中设置以下样式即可解决该问题:

html页面:

<div class="context"><span class="item">(随便拷贝的) 一天,我发现,一只黑蜘蛛在后院的两檐之间结了一张很大的网。难道蜘蛛会飞?要不,从这个檐头到那个檐头,中间有一丈余宽,第一根线是怎么拉过去的?后来,我发现蜘蛛走了许多弯路--从一个檐头起,打结,顺墙而下,一步一步向前爬,小心翼翼,翘起尾部,不让丝沾到地面的沙石或别的物体上,走过空地,再爬上对面的檐头,高度差不多了,再把丝收紧,以后也是如此。</span></div>

css样式

.context {width: 300px;height: 400px;.item {display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。-webkit-box-orient:vertical; //从上到下垂直排列子元素(设置伸缩盒子的子元素排列方式)-webkit-line-clamp:2; //限制行数overflow:hidden; //超出部分隐藏text-overflow:ellipsis;//用一个省略号代替超出的内容}}

希望能够帮到你!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。