CSS controls single line (multi-line) text beyond hide or show ellipsis (…)

Text beyond partial hiding is generally divided into single lines and multiple lines. The following two methods are mainly introduced

One, a single line of text hidden ellipsis display

.ljl {
    width: 200px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}
Copy the code

Two, more than one line of text ellipsis display (common method 1)

1. (This method is applicable to WebKit browsers and mobile terminals due to the use of WebKit CSS extension properties)

.ljl {
    width: 200px;
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
Copy the code

Note: CSS3 text-overflow attributes mainly include: clip, ellipsis, string

The original link: blog.csdn.net/longgeaisis…