CSS 一段文本怎么设置超过省略号显示

html-css028

CSS 一段文本怎么设置超过省略号显示,第1张

单行文本实现方法:

实现效果:

多行文本溢出显示省略号实现方法:

实现效果:

适用范围:

因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端;

扩展资料:

-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:

display:-webkit-box必须结合的属性,将对象作为弹性伸缩盒子模型显示。

-webkit-box-orient必须结合的属性,设置或检索伸缩盒对象的子元素的排列方式。

参考资料:百度百科--text-overflow

方法和详细的操作步骤如下:

1、第一步,打开html编辑器并创建一个新的html文件,例如:index.html,见下图,转到下面的步骤。

2、第二步,完成上述步骤后,在index.html中的<style>标记中,输入CSS代码,见下图,转到下面的步骤。 

3、第三步,执行完上面的操作之后,浏览器运行index.html页面。

 如果此时文本超过2行,则多余的部分将自动显示为省略号,见下图。这样,就解决了这个问题了。

需要准备的材料分别有:电脑、浏览器、html编辑器。

1、首先,打开html编辑器,新建html文件,例如:index.html。

2、在index.html中的<style>标签中,输入css代码:

div{

width: 100px

overflow:hidden

text-overflow:ellipsis

display:-webkit-box

-webkit-box-orient:vertical

-webkit-line-clamp:2

}

3、浏览器运行index.html页面,此时文字超过2行会自动把多余部分用省略号显示 。