The reason for writing this article was that while using styles to implement multi-line text that went beyond the ellipsis display, I found pages where the ellipsis was not at the end of the text but in the middle. Later check turned out to be related to the text displayed in the A link. Let me elaborate.

There are many ways to achieve this, such as using JS to calculate the number of words or width, the number of words beyond the specified length, truncate the text and use ‘… ‘Concatenation, for example, can be easily controlled with styles. Here’s how to do it with styles. The following methods are compatible with mainstream browsers on mobile terminals and PCS.

1. Single line beyond…

The CSS code:

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

HTML code:

<p class="text">I'm single-line I'm single-line text I'm single-line text I'm single-line text I'm single-line text</p>
Copy the code

2. Multiple lines of text beyond…

CSS code :(implemented using deprecated webkit private properties, available on mobile)

.text2{ display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; -webkit-box-orient:vertical; box-orient: vertical; -webkit-line-clamp:2; line-clamp: 2; Overflow :hidden; text-overflow:ellipsis; }Copy the code

HTML code:

<p class="text2">I'm multi-line text I'm multi-line text I'm multi-line text I'm multi-line text I'm multi-line text</p>
Copy the code

3. There is a bug when using multi-line ellipsis in a link

The phenomenon is that the ellipsis is not displayed at the end of the article, but in the middle of the article, which is the error phenomenon mentioned at the beginning of the article. This phenomenon appears in the mobile terminal, PC terminal test, can be displayed normally. Probably related to the browser kernel.

The workaround: Don’t wrap text that requires an ellipsis directly with the A tag. Or nest another layer inside the A tag.

Such as:

<a href=""><span>I'm multiline text I'm multiline text I'm multiline text</span></a>
Copy the code