How does CSS let the text overflow section display ellipses? (Code instance)

Source: Internet
Author: User
When we are in the front page development, generally get the article title, and then a line of the display. But when the title is too long, it causes a newline to appear. There is also the display of some text information, if the full display is too cumbersome, will bring a sense of web experience will not. Although we can use Overflow:hidden to hide characters that are more than the width. But the end seems to feel a bit stiff. It is also not conducive to letting users know that there are characters that are not displayed at the end. The best way to do this is to replace the extra characters with ellipses.

In this chapter we will give you a detailed description of how CSS makes the text overflow section display the ellipsis method. We hope to help you.

One: single-line text overflow display ellipsis ... (the ellipsis is displayed for more than the part of the caption ...) )

<! DOCTYPE html><html><head><meta charset= "UTF-8" ><title>css how to make the text overflow part display ellipses? A single line exceeds </title><style>*{margin:0px;padding:0px;}. box{width:300px;height:500px;margin:50px Auto;}. Overflow{width:220px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-o-text-overflow:ellipsis;} </style></head><body><div class= "box" ><p>css implement single-line text out of length display ellipsis </p><p class= " Overflow ">css implement single-line text out of length display ellipsis </p></div></body></html>

The above code is as follows:

which, white-space:nowrap; indicates that the text does not wrap, and continues on the same line, knowing that the tag is encountered;

Overflow:hidden; do not display more than the object size of the content, is to put out the part of the hidden;

Text-overflow:ellipsis; When the text object overflow is displayed ... and of course, the Set property is not displayed for clip point points;

-o-text-overflow: To be compatible with opera browser;

Two: multi-line text overflow display ellipsis ...

1. Set directly with CSS properties (only the-webkit kernel works)

<! DOCTYPE html><html><head><meta charset= "UTF-8" ><title>css how to make the text overflow part display ellipses? Multiple lines exceeding </title><style>*{margin:0px;padding:0px;}. box{width:280px;height:62px;margin:50px Auto;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;- webkit-line-clamp:3;-webkit-box-orient:vertical;} </style></head><body><div class= "box" >CSS implementation of multiple lines of text beyond the length of the display ellipsis, CSS implementation of multiple lines of text beyond the length of the display ellipsis, CSS Implement multi-line text out of length display ellipsis </div></body></html>

The above code is as follows:

Among them, the mobile browser is mostly WebKit kernel, so this method is applicable to the mobile side;

-webkit-line-clamp is used to limit the number of lines of text displayed in a block element, which is an irregular attribute (unsupported WebKit property) that does not appear in the draft CSS specification;

Display:-webkit-box The object as an elastic telescopic box model;

-webkit-box-orient Sets or retrieves the arrangement of child elements of a telescopic box object;

Text-overflow:ellipsis use the ellipsis "..." to hide out-of-range text in cases where multiple lines of text are used.

2. Using Pseudo-Class

<! DOCTYPE html><html><head><meta charset= "UTF-8" ><title>css how to make the text overflow part display ellipses? Multiple lines exceeding </title><style>*{margin:0px;padding:0px;}. box{width:280px;height:62px;margin:50px Auto;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;- webkit-line-clamp:3;-webkit-box-orient:vertical;} p{position:relative; line-height:20px; max-height:40px;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%);} </style></head><body><div class= "box" > <p> CSS implements multi-line text beyond the length of the display ellipsis, CSS implementation of multiple lines of text beyond the length display province The CSS implements multiple lines of text beyond the length display ellipsis </p></div></body></html> 

The above code is as follows:

This method can be used in a wide range of applications, but the text does not exceed the line of the case will also appear ellipsis, combined with JS optimization of the method.

Sets the height to an integer multiple of line-height to prevent the outside text from revealing. Add a gradient background to P::after to prevent text from appearing in half. Because IE6-7 does not display content, it is necessary to add a label compatible with ie6-7 (such as:<span>...<span/>); compatible IE8 needs to be replaced by: after.

3. Use absolute positioning and padding; (cross-browser solution)

<! DOCTYPE html><html><head><meta charset= "UTF-8" ><title>css how to make the text overflow part display ellipses? Multiple lines exceeding </title><style>*{margin:0px;padding:0px;}. box{width:300px;height:500px;margin:50px Auto;}. con{  position:relative;  height:40px;  width:250px;  line-height:20px;  Overflow:hidden;  padding-right:12px;}. t{  Position:absolute;  right:0;  bottom:0;} </style></head><body><div class= "box" > <p class= "con" > CSS implements multi-line text out of length display ellipsis, CSS Implementation of multiple lines of text beyond the length of the display ellipsis, CSS implementation of multiple lines of text beyond the length of the display ellipsis. <span class= "T" >...</span> </p></div></body></html>

The above code:

The principle of this method is to first embed a <span>...</span> in the element containing the text, and then leave an ellipsis on the right side of the element that contains the text ... Position (padding-right), and finally use absolute positioning to omit the number ... Navigate to the Padding-right area on the right (lower-right corner).

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

Tags Index: