Truncate text without the three dots in CSS

Python_Krow 0
Viewed 19

I want to truncate a long text after three lines, but without the three dots.

Here is the code that's not working:

<html lang="en">
<style>
    .truncateText{
        height: auto;
        width: 100px;
        border: 1px solid red;

        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>
<div class="truncateText">
This long text needs to be truncated without the three dots
</div>
</html>

Thanks!

css html
1 Answers

Set a height equal to 3 lines of text:

.truncateText {
  --h: 1.2em; /* control the height */

  line-height: var(--h); /* size of one line of text */
  height: calc(3*var(--h));
  width: 100px;
  border: 1px solid red;
  overflow: hidden;
}
<div class="truncateText">
  This long text needs to be truncated without the three dots
</div>

Temani Afif0
Related