Unable to control overflow of a paragraph after two lines using ellipsis

Question

{ PS : i referred to Unable to get ellipsis for Multiline Paragraph }

Expected Output:

Focus with soft study music in

the background and make sure...

[after two lines, ellipsis is showing and text stops]

(https://i.stack.imgur.com/BeBdt.png)

..................................................................................................................................................................................

Obtained Output:

But after researching and checking many answers and tutorials I obtain the below result

I get this output with text flowing after the ellipsis

Focus with soft study music

in the background and make sure ...

it caters to all your needs.

....................................................................................................................................................................................

Main picture:

This is the css code

            .text-tocut{
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                width:170px;
                height: 60px;
                font-size: 13px;
                margin-bottom: 10px;
            }

This is html code

            <div class="sub-box">
                <img class ="sub-image" src="thumbnails\c.jpg">
                <img class="playsong-button" src="buttons\playsong-button.jpg">
                <p class="sub-desc">
                    Instrumental Study
                </p>
                <p class="text-tocut">
                    Focus with soft study music in the background and make sure it caters to all your needs.
                </p>
                

            
            </div>

How do I get the output that I need? which is enter image description here

I thought we had to put the "para" into a div with a fixed width and height or make the para the child class and apply

display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;

also tried using text overflow, But, unfortunately, this didn't work either

I found similar question but none of them matched mine and I haven't found an answer so far

score 0 · Answer 1 · answered Jan 24 '23 at 23:09

not clear exactly what you are asking but it looks like you just need to make sure your text actually overflows

.text-tocut {
display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  
  overflow: hidden;
  width: 173px;
  height: 30px;
  font-size: 13px;
  margin-bottom: 10px; 
  border:solid 1px red;
}

<div class="sub-box">
  <img class="sub-image" src="thumbnails\c.jpg">
  <img class="playsong-button" src="buttons\playsong-button.jpg">
  <p class="sub-desc">
    Instrumental Study
  </p>
  <p class="text-tocut">
    Focus with soft study music in the background and make sure it caters to all your needs.
  </p>



</div>

Unable to control overflow of a paragraph after two lines using ellipsis

1 Answers1