'Clamping lines with line-clamp and nested p tags

I'm trying to use the -webkit-line-clamp attribute (as seen https://css-tricks.com/almanac/properties/l/line-clamp/) but it doesn't seem to work with nested tags.

I'm trying to make this sample works :

<html>
  <body>
    <div style="width:200px; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat.
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat.
      </p>
    </div>
  </body>
</html>

My content is generated by quill.js and it's wrapped by multiple p tags. I cannot change that. Do you have any idea of how I can make -webkit-line-clamp (or something similar) works?

css


Solution 1:[1]

If you wrap the two paragraphs in another div, your current code will truncate the displayed text.

Here is a working example:

.container {
  display: -webkit-box; 
  overflow: hidden;
  -webkit-line-clamp: 5; 
  -webkit-box-orient: vertical; 
  width:200px; 
}
<html>
  <body>
    <div class="container">
      <div>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat.
        </p>
      </div>
      
    </div>
    
  </body>
</html>

Here is an example using span tags instead of paragraph tags. This approach allows "..." to become visible:

.container {
  display: -webkit-box; 
  overflow: hidden;
  -webkit-line-clamp: 5; 
  -webkit-box-orient: vertical; 
  width:200px; 
}
<html>
  <body>
    <div class="container">
      <div>
        <span>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat.
        </span>
        <span>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
          quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
          consequat.
        </span>
      </div>
      
    </div>
    
  </body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions