Home > Article > Web Front-end > Solution to ellipses in css parts beyond 2 lines
Solution to ellipses in css parts beyond 2 lines
- 高洛峰Original
- 2017-03-16 09:56:202501browse
I encountered this problem when I was working on something today. I summarized it on Baidu and got this result.
First of all, you must know the three properties of css.
overflow:hidden; //The exceeded text is hidden
text-overflow:ellipsis; //Overflow is displayed with ellipses
white-space:nowrap; //No line wrap when overflow
These three are the basic properties of CSS and need to be remembered.
But the third attribute can only display one line and cannot be used here. So what if multiple lines are displayed?
css3 solves this problem. The solution is as follows:
display:-webkit-box; //Replace objectDisplayed as elastic scalingbox model.
-webkit-box-orient:vertical; //Arrange child elements vertically from top to bottom (set the arrangement of child elements of the telescopic box)
-webkit-line-clamp:2; //This attribute is not a standard attribute of CSS. It needs to combine the above two attributes to indicate the number of displayed rows.
The final css style is as follows:
overflow:hidden;
text-overflow:ellipsis;
display:-webkit -box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
If it is a two-line or three-line container, think There is no way to implement this method purely using css.
can provide two methods, one is to use the program to truncate the words when outputting, the other is to use js to judge the number of words to intercept.
The demo of JS is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Examples</title>
<style type="text/css">
.demo{width:100px;}
</style>
</head>
<body>
<div class="demo" id="demo">怎么显示两行或三行文字，然后多出的部分省略号代替?</div>
<script>
// js无法直接通过class获取对象，必须自己写一个方法,这样效率会非常低，原生js里最好用id获取，
// 直接用id获取domo对象
var oBox=document.getElementById('demo');
// slice() 方法可从已有的数组中返回选定的元素。
// 您可使用负值从数组的尾部选取元素。
// 如果 end 未被规定，那么 slice() 方法会选取从 start 到数组结尾的所有元素。
// 此处需要根据需求自行修改slice()的值，以达到要显示的内容
var demoHtml = oBox.innerHTML.slice(0,10)+'...';
// 填充至指定位置
oBox.innerHTML = demoHtml;
</script>
</body>
</html>The above is the detailed content of Solution to ellipses in css parts beyond 2 lines. For more information, please follow other related articles on the PHP Chinese website!