介绍
为了保证页面的整洁美观,有时候,页面当中文字过长的时候,需要使用 ...
来显示,代码如下:
单行文本溢出
对于单行文本,想要将溢出的文字用 ...
显示,可以设置 text-overflow: ellipsis
就可以得到解决,并且这个属性所有浏览器都支持,具体代码如下:
html:
<div class="content">为了保证页面的整洁美观,有时候,文字内容太多,我们需要在一定宽度内显示文字,超出宽度的文字内容隐藏,并且显示省略号,</div>
css:
.content {
width: 300px;
border: 1px solid red;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
- 效果如下:
多行文本溢出
对于多行文本,想要将溢出的文字用 ...
显示,需要使用到 WebKit
的CSS扩展属性,不过该方法只适用于WebKit
浏览器及 移动端
,具体代码如下:
html:
<div class="content">为了保证页面的整洁美观,有时候,文字内容太多,我们需要在一定宽度内显示文字,超出宽度的文字内容隐藏,并且显示省略号,</div>
css:
.content {
width: 300px;
margin-top: 20px;
border: 1px solid blue;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
- 效果如下:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)