介绍
为了保证页面的整洁美观,有时候,页面当中文字过长的时候,需要使用 ...
来显示,代码如下:
单行文本溢出
对于单行文本,想要将溢出的文字用 ...
显示,可以设置 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;
}
- 效果如下: