Multi-line text overflow displays ellipses (…)

Everyone should know that the <a href="http://www.php.cn/wiki/868.html" target="_blank">text-</a><a href="http://www.php.cn/wiki/923.html" target="_blank">overflow</a>:ellipsis attribute is used to realize the overflow display of ellipsis (...) in a single line of text. Of course, some browsers also need to add the width<a href="http://www.php.cn/wiki/835.html" target="_blank">width</a> attribute.

css Code:

1. overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

   Copy after login

But this attribute does not support multi-line text overflow The ellipses are displayed. Here we introduce several methods to achieve this effect based on the applicationscenario.

WebKit browser or mobile page

The page implementation in WebKit browser or mobile terminal (most browsers with WebKit core) is relatively simple, and you can directly use WebKit's CSS extension Property (WebKit is a private property)-webkit-line-clamp; Note: This is an unsupported WebKit property, which does not appear in the CSS specification draft.

-webkit-line-clampUsed 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.
Common combination attributes:

1. <a href="http://www.php.cn/wiki/927.html" target="_blank">display</a>: -webkit-box; Attributes that must be combined, objectDisplayed as elastic scalingBox model.

2. -webkit-box-orient Attributes that must be combined to set or retrieve the arrangement of the child elements of the flex box object.

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

css Code:

##

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

Copy after login

This attribute is more appropriate WebKit browser or mobile browser (mostly WebKit-based) browsers.

For specific examples, please check http://www.php.cn/

Cross-browser compatible solution

The more reliable and simple method is to set a relatively positioned container Height, simulated with elements containing ellipses (...);

For example:

css Code:

p {
    position:relative;
    line-height:1.4em;
    /* 3 times the line-height to show 3 lines */
    height:4.2em;
    overflow:hidden;
}
p::after {
    content:"...";
    font-weight:bold;
    position:absolute;
    bottom:0;
    right:0;
    padding:0 20px 1px 45px;
    background:url(http://www.php.cn/) repeat-y;
}

Copy after login

Note a few points here:

1. height is really good, it’s 3 of

   line-height Times;

2. It is better to omit the end and use translucent png to create a dodge effect, or set the background color;

3. IE6- 7 does not display

   content content, so to be compatible with IE6-7, you can add a tag to the content, such as ...To simulate;

4. To support IE8, you need to replace

   ::after with :after;

JavaScript Solution

You can also use

js to simulate according to the above ideas. The implementation is also very simple. I recommend a few to do similar work. Mature little tool:

1.Clamp.js

Download and document address: http://www.php.cn/

It is also very simple to use ：

js Code:

var module = document.getElementById("clamp-this-module");
$clamp(module, {clamp: 3});

Copy after login

2.

jQueryPlug-in-jQuery.dotdotdot

This is also very convenient to use:

js Code:

$(document).ready(function() {
$("#wrapper").dotdotdot({
//configuration goes here
});
});

Copy after login

The above is the detailed content of Multi-line text overflow displays ellipses (…). For more information, please follow other related articles on the PHP Chinese website!