How to achieve the effect of single-line and multi-line text exceeding the display omission in css

The content of this article is about how to achieve the effect of single-line and multi-line text beyond display and omission in css. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Single line text omitted

.ellipsis-line {
border: 1px solid #f70505;
padding: 8px;
width: 400px;
overflow: hidden;
text-overflow: ellipsis; //文本溢出显示省略号
white-space: nowrap; //文本不会换行
}

Syntax:

text-overflow:clip/ellipsis;

Default value: clip

Applies to: All elements

clip: When the text in the object overflows, the omission mark (...) is not displayed, but the overflowed part is cut off.

ellipsis: Displays an ellipsis mark (…) when the text within the object overflows.

When using it, sometimes it is found that the omitting mark effect does not appear. After testing, it is found that when using ellipsis, it must be combined with overflow:hidden; white-space:nowrap; width: specific value; these three Styles are effective when used together.

Multiple lines of text are omitted

Directly use the css attribute-webkit-line-clamp:n; to set

in WebKit browser or mobile terminal (mostly WebKit kernel browser) page implementation is relatively simple, you can directly use WebKit's CSS extended attribute (WebKit is a private attribute) -webkit-line-clamp; note: this is an unsupported attribute (unsupported WebKit property), it does not appear in CSS specification draft.

-webkit-line-clamp is used to limit the number of lines of text displayed in a block element. In order to achieve this effect, it needs to be combined with other WebKit properties. Commonly combined attributes:

display: -webkit-box; must be combined to display the object as a flexible box model.

-webkit-box-orient must be combined with the attribute to set or retrieve the arrangement of the child elements of the flex box object.

text-overflow: ellipsis;, can be used in the case of multi-line text, using the ellipsis "..." to hide the text that exceeds the range.

This attribute is only suitable for WebKit browsers or mobile browsers (most of which are WebKit core) browsers

.multi-line {
border: 1px solid #f70505;
width: 400px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}

The effect is as shown in the figure:

From the effect point of view, its advantages are:

1. Responsive truncation, making adjustments according to different widths

2. The ellipsis will be displayed only when the text exceeds the range, otherwise it will not Display the ellipsis

3. The browser implements it natively, so the ellipsis position is displayed exactly

, but the shortcoming is also very direct, because -webkit-line-clamp is an irregular attribute and it does not appear in CSS specification draft. In other words, only browsers with webkit core support this attribute. Browsers such as Firefox and IE do not support this attribute, and the browser compatibility is not good.

Usage scenarios: Mostly used for mobile pages, because mobile device browsers are more based on the webkit kernel. In addition to poor compatibility, the truncation effect is good.

Use positioning and pseudo-class elements

p{
position: relative;
width:400px;
line-height: 20px;
max-height: 60px;
overflow: hidden;
}
p::after{
content: "…";
position: absolute;
bottom: 0;
right: 0;
padding-left: 40px;
background: -webkit-linear-gradient（left, transparent, #fff 55%）；
background: -o-linear-gradient（right, transparent, #fff 55%）；
background: -moz-linear-gradient（right, transparent, #fff 55%）；
background: linear-gradient（to right, transparent, #fff 55%）；
}

The effect is as shown in the figure:

##Suitable scenario: there is a lot of text content, make sure the text content is certain It will exceed the container, so it is a good choice to choose this method. However, ellipses will also appear when the text does not exceed the line. This method can be optimized with js.

Note:

Set height to an integer multiple of line-height to prevent excess text from being exposed.

Add a gradient background to p::after to prevent only half of the text from being displayed.

Since ie6-7 does not display content content, you need to add tags to be compatible with ie6-7 (such as: ...); to be compatible with ie8, you need to replace::after with:after .

Combined with js optimization code

css:
p {
position: relative;
width: 400px;
line-height: 20px;
overflow: hidden;
}
.p-after:after{
content: "…";
position: absolute;
bottom: 0;
right: 0;
padding-left: 40px;
background: -webkit-linear-gradient（left, transparent, #fff 55%）；
background: -moz-linear-gradient（left, transparent, #fff 55%）；
background: -o-linear-gradient（left, transparent, #fff 55%）；
background: linear-gradient（to right, transparent, #fff 55%）；
}

js:

$（function（）{
//获取文本的行高，并获取文本的高度，假设我们规定的行数是五行，那么对超过行数的部分进行限制高度，并加上省略号
$（'p'）。each（function（i, obj）{
var lineHeight = parseInt（$（this）。css（"line-height"））；
var height = parseInt（$（this）。height（））；
if（（height / lineHeight） >3 ）{
$（this）。addClass（"p-after"）
$（this）。css（"height","60px"）；
}else{
$（this）。removeClass（"p-after"）；
}
}）；
}）

Use third-party plug-ins or write your own script control

There are many introductions on the Internet about using JavaScript to achieve multiple functions To solve the problem of overflow and omission of line text, some use plug-ins, and some use self-encapsulated JavaScript files. However, I think it is better to use js written by yourself.

//div
<div class="box">北京时间11月18日，苏州太湖马拉松女子比赛中，中国选手何引丽最终获得亚军，落后冠军5秒。但是赛后，何引丽在社交媒体上道歉，称自己最后时刻跑累了，没有拿稳国旗，这究竟是怎么回事？</div>
//css
.box {
width: 400px;
height: 40px;
border: 1px solid #f70505;
line-height: 20px;
}
//js
<script type="text/javascript">
$（function（） {
var content_arr = []; //定义一个空数组
$（&#39;.box&#39;）。each（function（） { //遍历box内容
var content = $.trim（$（this）。text（））； //去掉前后文空格
content_arr.push（content）； //内容放进数组
}）
for （var i = 0; i < content_arr.length; i++） { //遍历循环数组
if （content_arr[i].length >= 50） { //如果数组长度（也就是文本长度）大于等于50（数字可自己定义）
content = content_arr[i].substr（0, 50） + &#39;…&#39;; //添加省略号并放进box文字内容后面
$（".box"）。eq（i）。text（content）；
} else {

The above is a complete introduction to how CSS can achieve the effect of single-line and multi-line text exceeding the display omission. If you want to know more about

CSS3 tutorial, please pay attention to the PHP Chinese website.

The above is the detailed content of How to achieve the effect of single-line and multi-line text exceeding the display omission in css. For more information, please follow other related articles on the PHP Chinese website!