Restraining text with line clamp and p tags within each other

I'm experimenting with the -webkit-line-clamp property (as detailed on https://css-tricks.com/almanac/properties/l/line-clamp/) but it appears to have issues when used with nested elements.

Here's the code snippet I am working with:

<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>

The content I need to apply the line clamp to is generated using quill.js and is enclosed within multiple p tags that cannot be modified. Any suggestions on how I can achieve the desired effect using -webkit-line-clamp or similar techniques?

css

Answer №1

When you enclose the two paragraphs within another div, your current code may cut off the text being displayed.

Take a look at this successful 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 alternative approach using span tags instead of paragraph tags. This method will allow "..." to be 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Line breaking by syllables using CSS

When it comes to CSS properties, the word-break attribute is able to split words across lines at specific points (such as the first character extending beyond a certain length). Surprisingly, there seems to be no existing CSS method (even with limited supp ...

htmlcsstypographyhyphenation

What is the best way to position an image in the center of an Ionic 2 application?

Hey there, I've got a few pages in my Ionic 2 app that contain an <ion-img> inside an <ion-content padding> like this: <ion-content padding> <p>Some text here....</p> <p>Some other text here...</p> < ...

cssangularionic-framework

The CSS class names for Next.js have not been defined yet

Just getting started with next js and trying to use css modules for styling my nav component. However, I noticed that the classname I setup for the nav element is not showing up in the rendered DOM. Even though I can see the generated styles by webpack in ...

javascriptcssreactjsnext.js

Styling a horizontal navigation bar with CSS: Using list items (`li`) versus div elements (`div`)

Is it more semantically correct to float li elements within a ul, or should we opt for floating divs inside an external 'outer' div? ...

css

My dilemma lies in attempting to display a <div> when I hover over a different <a> element. What could be causing this issue?

I have tried numerous solutions to this issue on the website and have incorporated the recommended techniques, but I still can't figure out what's missing. Could it be a larger code structure that is hindering my progress or am I simply overlooki ...

htmlcssflexboxhover

Using ion-icon inside a clickable ion-card while applying float: right does not render properly

I am facing an issue with a list of ion-cards that have clickable icons appearing when you hover over them. The problem is that due to the floating nature of the icons, they are not positioned correctly (as shown in the image below) and end up getting cove ...

cssangularionic-frameworkionic5

Having trouble with getting the background image URL to work in Django CSS?

Hey there, I'm having an issue with my header-task class. The background-image doesn't seem to be showing up, even though when I click the URL in Visual Studio Code, the image displays. Can anyone help me figure out what's going wrong with m ...

cssdjango

Creating mobile-friendly buttons: a step-by-step guide

How can I make my button responsive? I have a button on an image within a slider. It looks good and works fine on desktop, but on mobile it appears too big and gets overlapped with the slider radio icons, causing the "read more" link button to not redirect ...

htmlcssresponsive-design

Use a CSS media query to elevate the third inline-block div above the initial two divs without utilizing Bootstrap

I am trying to style three colored HTML div tags displayed inline-block by using CSS only. The challenge I am facing is getting the blue div to appear on top of the red and green divs. My goal is to achieve a layout where the blue div overlaps the other tw ...

htmlcssresponsive-design

Increasing space at the top with heading

As I scroll down, the header on my website remains in a static position and disappears. However, when I scroll back up, the header reappears wherever the user is on the page. While this functionality works well, I have noticed that as I scroll all the way ...

javascriptjqueryhtmlcss

What are the reasons that execCommand does not function correctly when attempting to justify text?

Why isn't justify with execCommand working properly? Take a look at the code below: $('#JustifyLeft').click(function(){ document.execCommand("JustifyLeft", false, ""); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2 ...

javascriptjquerycssexeccommand

Oops! An error occurred while using the Google Maps API. Let's fix this hic

I recently encountered an issue on my website where the Google Map displayed suddenly showed an error message saying: "Oops! Something went wrong. This page didn't load Google Maps correctly. See the JavaScript console for technical details." Afte ...

javascripthtmlcssgoogle-maps

What are alternative methods to prevent a div from expanding in width from the right side other than using position absolute?

Looking to create a div element that only expands from the left side as content is added? <div id="sent_message" style='background-color: #2b89cc; color: white; font-family: Arial,Helvetica, sans-serif; margin-top: 10px; display: ...

javascripthtmlcss

Snug enclosure surrounding an image

I'm currently working on creating a chat application and I need the chat bubbles to snugly wrap around their contents. It's working fine for text, but when an image is included in the bubble, it creates some issues. Below is the HTML code that I ...

htmlcsscss-positionpositioning

What causes the difference in behavior between Firefox and Chrome when it comes to multiple column rendering and the use of overflow

Recently, I came across an interesting issue in Firefox related to lists inside a div with columns:2 set. In Firefox, when overflow:hidden is applied to the list, it stops rendering in 2 columns. However, in Chrome, the list continues to render in 2 colum ...

htmlcssgoogle-chromefirefoxcss-multicolumn-layout

Discovering an HTML Element in a JavaScript Array with Specific Styling: A Step-by-Step Guide

I am in the process of developing a website that consists of different sections. The concept is simple - by clicking on a button located at the bottom of the page, it will reveal the corresponding div section. For styling purposes, I have initially hidden ...

javascripthtmlcssarraysfilter

The Mui Switch track color fails to change when checked

I'm looking to customize the colors of the track for both checked and unchecked states. Currently, the track color is working for the unchecked state but defaults for the checked state: Checked State: https://i.stack.imgur.com/eGV4a.png Unchecked S ...

cssreactjsmaterial-ui

Are the dimensions of <TD> and <table> not displaying properly?

I've encountered a peculiar issue that I need help with. Here is the Fiddle link: http://jsfiddle.net/H3W4X/ If you want to view it in fullscreen: http://jsfiddle.net/H3W4X/embedded/result/ This is the code snippet causing trouble: <div id="wor ...

jquerycsshtml-table

Is it feasible to generate a vertical bar or horizontal graph using Chart.JS?

Is there a way to manipulate Chart.JS to create a horizontal bar chart with percentages displayed along the bottom, similar to this example created using xlsxwriter? View Example UPDATE I marked a certain answer as correct based on the jsfiddle provided ...

jqueryhtmlcsschartschart.js2

What is the best way to center-align a child DIV (not vertically)?

After spending an entire day searching for a solution to align my child DIV from its parent, I realized that all my research led me to the same results. This is my first attempt at creating a webpage. Check out the result here. View the code on https:// ...

htmlcssalignment