单行文本实现方法:
实现效果:
多行文本溢出显示省略号实现方法:
实现效果:
适用范围:
因使用了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行会自动把多余部分用省略号显示 。