Wish to display <p> text in 3 line with left align and rest of the text as ellipsis-CodePudding

Wish to display <p> text in 3 line with left align and rest of the text as ellipsis ( Please refer desired output image). But currently the below css display in single line with ellipsis as below. Could someone please advise how to make the text display in 3 line and rest in ellipsis ?

Actual Ouput:

.textElipsis {
  width: 250px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis !important;
}

<p class='textElipsis'>
  Best heading added here. The most relevant data added here. Greatest of all time. Print the whole text here. Ideas are always usefull...
  <div>
    <code>{textCode}</code>
  </div>
</p>

Desired output:

CodePudding user response：

You can use line-clamp for this.

.textElipsis {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}

But it is not supported by all the browser, you can try it or you can use Clamp.js for the same.

CodePudding user response：

You can use the -webkit-line-clamp for this.

https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp

For browser support see:

https://caniuse.com/?search=line-clamp

Please also note, that you cannot put a div inside a p tag. It is not valid html.

List of HTML5 elements that can be nested inside P element?

.textElipsis {
  width: 250px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px dashed tomato;
}

.code {
  display: block;
}

<p class='textElipsis'>
  Best heading added here. The most relevant data added here. Greatest of all time. Print the whole text here. Ideas are always usefull...
  <code >{textCode}</code>
</p>