Home  >  Article  >  Web Front-end  >  Share examples of using CSS to implement single-line or multi-line text overflow and display ellipsis

Share examples of using CSS to implement single-line or multi-line text overflow and display ellipsis

零下一度
零下一度Original
2017-07-27 14:56:001513browse

If you want to realize the overflow display of ellipses in a single line of text, you should all know to use the text-overflow:ellipsis attribute. Of course, you also need to add the width attribute to be compatible with partial browsing.

Implementation method:

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

## Implementation Effect:

## However, this attribute only supports the overflow display of ellipsis in a single line of text. What if we want to implement multi-line text overflow and display ellipses.

Next, let’s focus on the multi-line text overflow display ellipses, as follows.

Implementation method:

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

Realization effect:

#Scope of application:

Due to the use of WebKit’s CSS extension attributes, this method is suitable for WebKit browsers and mobile terminals;
Note:

      -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 be combined with other WebKit properties. Commonly combined attributes:
    1. display: -webkit-box; Attributes that must be combined to display the object as a flexible box model.
    2. -webkit-box-orient must be combined with the attribute to set or retrieve the arrangement of the child elements of the flex box object.

Method to realize:

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%);
}

Achievement effect:

##Applicable scope:

This method has a wide range of applications, but it will also appear when the text does not exceed the line. Ellipsis, this method can be optimized with js.
Note:

    Set height to an integer multiple of line-height to prevent excessive text exposed.
    1. Add a gradient background to p::after to avoid only half of the text being displayed.
    2. 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.

The above is the detailed content of Share examples of using CSS to implement single-line or multi-line text overflow and display ellipsis. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn