FE-problem-collection
FE-problem-collection copied to clipboard
XIANFESchool
多行文本溢出显示省略号
最近在项目的制作过程中遇到超出需要折行的问题 如果是一行超出
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
当然还需要设置宽度的
还可以参考 之前的解决方案 https://github.com/ShuyunXIANFESchool/FE-problem-collection/issues/13
问题
如果是两行显示，第一行折行，第二行需要超出省略该如何实现呢？ 或者第N行要省略该如何解决呢？
解决
- 解决方案1 css 的不规则属性解决
-webkit-line-clamp 是一个不规则属性，不出现在css 草案中。用来实现块级元素显示几行，它需要与其他元素组合使用
display：-webkit-box;
-webkit-box-orient: vertical; // 从上向下垂直排列子元素。设置或检索伸缩盒对象的子元素的排列方式 。
text-overflow: ellipsis; //文本溢出 用省略号显示
-webkit-line-clamp: 2;
overflow: hidden;
当然也需要设置高度来配合显示
- 解决方案2 css 的伪类实现
对要显示的文字进行相对定位 对省略号进行绝对定位
p {
position: relative;
line-height: 1.4em;
height: 4.2em // 1.4 *3 显示三行的 所有高度是行高的三倍
overflow: hidden;
}
p::after {
content: '...',
position: absolute,
bottom: 0;
right: 0;
padding: 5px;
}
demo https://jsfiddle.net/mayufo/us8tcuyz/
- 解决方案3：js解决方法
Clamp.js 这个就不具体展开了
可以参考demo http://codepen.io/feiwen8772/pen/AckqK
参考
- http://www.css88.com/webkit/-webkit-appearance/
- http://www.w3school.com.cn/tiy/t.asp?f=css3_box-orient
- http://www.520ued.com/article/54192b4b8d31c11e3b000400
感谢@silence717给我提出的问题
之前的对于多行文本溢出隐藏并没有深入，没有发现其中的问题，容我哭三分钟!!!
方案一 使用的 -webkit-line-clamp 虽然看似简单好用，但是确实是忽略了火狐和ie的兼容问题，经测试只能在chrome下使用
方案二 无法自动判断是否超出了文本，当文章没有超出所限制的字数的时候，还是有省略号存在
图片说明问题
重新查了一些网上的做法，特别来补充一下
补充1 js方法实现
原理：
1 通过给文字段固定的行高，每次通过固定的行高和可视高度进行判断 2 如果超过固定行高，减少显示的单词，直到显示我们希望的行高。
代码：
#block-with-text {
height: 58px;
}
function ellipsizeText(id) {
var el = document.getElementById(id);
var wordArray = el.innerHTML.split(' ');
while(el.scrollHeight > el.offsetHeight) {
wordArray.pop();
el.innerHTML = wordArray.join(' ') + '...';
}
}
ellipsizeText('block-with-text');
demo https://jsfiddle.net/m3uv2ad3/1/
缺点
1 文本块需要有固定的高度 2 当其中某个单词过长的时候 会造成省略号显示的问题 (个人感觉可以忽略)
注意：
1 以上是英文的使用，如果是中文，务必将里面的空格删掉，因为中文不是用空格划分的
demo https://jsfiddle.net/mayufo/m3uv2ad3/3/
2 在火狐下 设置同样的高度 中文显示的比较少，英文显示的行数会比较多。
3 如果中英混合 ，肯定就是按照中文的高度
测试 已经测试火狐和chrome
补充2 css实现
原理：
1 分别设置两个伪类before和after，before用来显示省略号，after 用来隐藏省略号 2 当内容较少的时候 after会盖住before，不显示省略号 3 当内容较多需要省略号的时候，内容会把after挤出去，这样就能显示出省略号
代码
.block-with-text {
overflow: hidden;
position: relative;
line-height: 1.2em;
/* max-height = line-height (1.2) * (3) 设置三行行高 */
max-height: 3.6em;
text-align: justify;
/*省略号到右边距的位置 */
margin-right: 15px;
/*给省略号的宽度留位置,三个点的宽度大概14px, 最好不要小于这个宽度*/
padding-right: 15px;
}
/*创建省略号*/
.block-with-text:before {
content: '...';
position: absolute;
/* 省略号的显示位置定位在右下方*/
right: 0;
bottom: 0;
}
/*遮盖省略号*/
.block-with-text:after {
content: '';
position: absolute;
/*设置遮盖省略号的位置 */
right: 0;
/*设置遮盖省的大小 */
width: 1em;
height: 1em;
margin-top: 0.2em;
/*设置遮盖省略号的背景颜色，这个要和背景颜色一致 */
background: white;
}
demo https://jsfiddle.net/mayufo/ehzyprds/
缺点
1 需要设置一个隐藏块来隐藏省略号，并要注意背景颜色 2 需要注意省略号的位置
测试 已经测试火狐和chrome
参考
- http://hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation/
