Omit display after html characters exceed the specified height_html/css_WEB-ITnose

As shown in the picture, I know a method, but it does not support Firefox and IE. Also, how should I add the [Details] at the end? It is best not to use javascript,

Reply to discussion (solution)

It’s better not to use javascript??
How to do it without javascript?

It’s best not to Use javascript??
How to do it without javascript?

Do you have to use javascript? How to do it well?

You are obviously not controlled by the front end.
Let the program Interception intercepts the string according to the byte length.

It seems that this really requires string interception! Otherwise, the number of words displayed cannot be controlled. CSS is not yet powerful enough.

CSS can do it, but I don’t know how to get the last detailed field.
overflow:hidden; text-overflow:ellipsis;white-space:nowrap;
Put these three Just add an attribute, but you must specify the container height.
One drawback is that this can only display one line of text. If it is multiple lines of text, it will not work.
Some browsers support multiple lines.

First, make sure how many lines of text can fit in the set height. For example, if there are 3 lines of text,
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line- clamp:3;
-webkit-box-orient:vertical;

If you don’t understand, you can check the usage of line-clamp!

First, make sure the height you set can accommodate a few lines of text. For example, if there are 3 lines,
text-overflow:ellipsis;
display:-webkit-box;
-webkit -line-clamp:3;
-webkit-box-orient:vertical;

If you don’t understand, you can check the usage of line-clamp!

Which browsers are webkit? I couldn’t find any specific information.

First of all, make sure the height you set can accommodate a few lines of text. If so, 3 lines
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;

If you don’t understand, you can check the usage of line-clamp!

Which browsers are webkit? I couldn’t find any specific information

You can check this URL http://www.css88.com/archives/5206#more- 5206

First, make sure the height you set can hold several lines of text. If there are 3 lines
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;

If you don’t understand, you can check the usage of line-clamp!

Which browsers are webkit? I couldn’t find any specific information

You can check this URL http://www.css88.com/archives/5206#more- 5206
Learned. Thanks for sharing