webkit-line-clamp：限制没有省略号的行数

Question

I'm trying to limit the number of lines in my text area. I follow this article: https://www.codegrepper.com/code-examples/css/how+to+show+specific+amount+of+multiline+text+in+html+css

.class{
   word-break: break-word;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   line-height: 16px; /* fallback */
   max-height: 32px; /* fallback */
   -webkit-line-clamp: 2; /* number of lines to show */
   -webkit-box-orient: vertical;
}

it works, but I don't want ellipsis at the end of the text. Simply replacing ellipsis by clip doesn't work. How do I change it?

Here is a working example, both class a and class b give the same result:

https://www.w3schools.com/code/tryit.asp?filename=GQI3IZL33M4T

<style> 
div.a {
    word-break: break-word;
    overflow: hidden;
    text-overflow: clip;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

div.b {
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
</style>
    
<h2>text-overflow: clip:</h2>
<div class="a">Hello world! Hello world! Hello world!Hello world! Hello world! Hello world!Hello world! Hello world! Hello world!Hello world! Hello world! Hello world! Hello world! Hello world! Hello world!Hello world! Hello world! Hello world! Hello world! Hello world! Hello world!Hello world! Hello world! Hello world!</div>

<h2>text-overflow: ellipsis:</h2>
<div class="b">Hello world! Hello world! Hello world!Hello world! Hello world! Hello world!Hello world! Hello world! Hello world!Hello world! Hello world! Hello world! Hello world! Hello world! Hello world!Hello world! Hello world! Hello world! Hello world! Hello world! Hello world!Hello world! Hello world! Hello world!</div>

Answer 1

If you don't want the ellipsis you can just use a simple div with a fixed height, which is a multiple of your line height with overflow hidden. The div will wrap the text normally, and will hide anything that's overflown.

The only reason to use the -webkit-line-clamp: 2; solution is to automatically add the ellipsis. Otherwise don't use it.