文本溢出
Posted YAZI
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了文本溢出相关的知识，希望对你有一定的参考价值。
1.控制文字在一排显示，超过部分省略打点显示（单行溢出）
<p>申达股份框架上啥减肥吧技术开发健身房空间卡酸辣粉是否哈市将开发手机壳发哈萨克肌肤啊手机壳发哈萨克肌肤按时缴费卡上健身房看了哈是否尽快立法</p>
p{
overflow:hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
2.控制文在最多占2行，多余的部分省略打点显示（多行溢出）
p{
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; //数字代表最多显示的行数
}
分析：
在webkit浏览器或移动端（绝大部分是webkit内核的浏览器）的页面实现比较简单，可以直接使用webkit的css扩展属性（webkit是私有属性）-webkit-line-clamp;
-webkit-line-clamp是一个不规范的属性，他没有出现在css规范草案中。
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果需要结合属性：
display:-webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient; 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。
text-overflow:ellipsis; 可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。
以上是关于文本溢出的主要内容，如果未能解决你的问题，请参考以下文章