1. Single-line text overflow displays ellipsis (…)
The ellipsis can use text-overflow: ellipsis in ie, but many browsers require a fixed width, and ff these browsers do not support the text-overflow: ellipsis setting. Let's sort out the compatible browsers below. The monitor displays the ellipsis tutorial. Everyone should know that the text-overflow:ellipsis attribute is used to achieve overflow display ellipsis (…) on a single line of text. Of course, some browsers also need to add the width attribute.
p{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
The three css properties set for the p tag above are required and indispensable, among which:
text-overflow: defines how to handle text overflow, there are 2 valid values:
①clip: When the inline content overflows the block container, the overflow part is cut off
②ellipsis: When the inline content overflows the block container, replace the overflow part with (...)
Detailed explanation:
(1) About overflow: hidden
Here we need to pay attention to one thing: the overflow here is not set as the attribute of the parent element div, but the attribute of the p tag, which needs to be distinguished from the common usage of overflow
①overflow: common usage of hidden: used in the outer layer of block-level elements (such as div) to hide inner overflow elements
②Special usage of overflow: hidden: in the above example with text-overflow: ellipsis; white-space: nowrap;
Implement the effect of the p element hiding its overflow and setting (...)
(2) About text-overflow: ellipsis;
This property depends on the existence of overflow: hidden. It can only take effect if overflow: hidden is set. You can think of it as a 'special style' for overflow to hide text overflow.
(3) About white-space: nowrap
Its role is to keep the text from wrapping, which is the basis for overflow: hidden and text-overflow: ellipsis to work! Without it overflow:hidden and text-overflow:ellipsis cannot work! (in the case of single-line text overflow omitted)
But this property does not support multi-line text overflow display ellipsis. Next, let's focus on multi-line text overflow and display ellipsis, as follows.
2. Multi-line text overflows display ellipsis (…)
The code to implement multi-line overflow hiding with CSS is very simple, but the compatibility is relatively low.
The implementation of the page in the WebKit browser or mobile terminal (most of the browsers with the WebKit core) is relatively simple, you can directly use the CSS extension property of WebKit (WebKit is a private property)-webkit-line-clamp; Note: This is a An unsupported WebKit property, which does not appear in the draft CSS specification.
-webkit-line-clamp is used to limit the number of lines of text displayed in a block element. To achieve this effect, it needs to combine other WebKit properties. Common binding properties:
①display: -webkit-box; Attributes that must be combined to display the object as an elastically scalable box model.
②-webkit-box-orient The properties that must be combined to set or retrieve the arrangement of the child elements of the flexbox object.
③text-overflow: ellipsis;, which can be used to hide the text beyond the range with the ellipsis "..." in the case of multi-line text.
Actual renderings:
There are two lines of text here, when the second line of text overflows, hide the overflowing text and show '...'
Unlike single-line text, the above text-overflow attribute cannot be used here. The webkit kernel browser-specific method is used here, so it can be used on the mobile side. Code:
<style>
p {
width: 100px;
/*height: 300px;*/
background-color: #2b542c;
overflow: hidden;
display: -webkit-box;/*Properties that must be combined to display the object as an elastically scalable box model*/
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
/*必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式--->vertical为垂直排列*/
}
</style>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Praesentium ut optio et, blanditiis incidunt! Quas saepe accusamus
natus, atque nam impedit temporibus ad et repudiandae aliquam asperiores
aliquid, possimus iste.</p>
</body>
上面代码中：
①-webkit-line-clamp：设置文本最多显示行数。
②-webkit-box-orient：不设置将不显示省略号（...）
【注意】
①未设置高度时按照行数显示，设置后仅仅会在设置的行显示省略号（...）
【垮浏览器兼容的方案】
网上查询后都说比较靠谱简单的做法就是设置相对定位的容器高度，用包含省略号(…)的元素模拟实现；但经过测试，在IE局限性较大
下面介绍一种JS兼容写法：
先看看我们最终实现的demo:
①在文本没有溢出父级元素时：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#view{
line-height: 25px;
}
</style>
</head>
<body>
<div id='view' style='border:1px solid red;width:200px;height:50px;overflow:auto'></div>
<script>
s = '这是一个文本这是一个文本这是一个ssssss文本这是一个文本sss这是一个文本这是一个文本'
el = document.getElementById('view');
n = el.offsetHeight;
for(i=0; i<s.length; i++) {
el.innerHTML = s.substr(0, i);
if(n < el.scrollHeight) {
el.style.overflow = 'hidden';
el.innerHTML = s.substr(0, i-3) + '...';
break;
}
}
</script>
</body>
</html>
First of all, we need to figure out the height represented by offsetHeight and scrollHeight: 1 When the scroll bar is displayed in overflow -----scrollHeight>offsetHeight
2 When there is no overflow -
scrollHeight=offsetHeight
②jQuery method to limit the number of characters
// limit the number of characters
$(".zxx_text_overflow").each(function(){
var maxwidth=23;
if($(this).text().length > maxwidth){
$(this).text($(this).text().substring(0,maxwidth));
$(this).html($(this).html()+'...');
}
});
.