Truncate text to fit in 3 lines and show three dots in end In Html

Question

I need to display a text as paragraph, but display only three lines and truncate the test while adding ...(three dots) in the paragraph end.

Burdock

Answer 1

I use the same logic than @zavg with some improvements:

• Use the single … character.
• Respect the maximum size.

function truncate(source, size) {
  return source.length > size ? source.slice(0, size - 1) + "…" : source;
}

var res = truncate('Truncate text to fit in 3 lines', 14);
console.log(res);

Edita

Awesome solution. Thank you. – Cinchonize

Answer 2

Calculate max length of string which can fit into 3 lines and use the following script

var maxLength = 140;
var result = yourString.substring(0, maxLength) + '...';

Analisaanalise

How to decide the maxlength? Why 140? – Burdock

@SundeepSaluja 140 value is just for code example (it is Twitter constant). You should empirically determine how many symbols fit into your 3 lines. – Analisaanalise

Answer 3

.class-name {
        display: block;
        white-space: nowrap;
        width: 15em;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    <div style="height: 15vh; padding: 10px;
                background:#dee0e5">
    <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum is simply dummy text of the printing and typesetting industry</span>
    </div>

<div style="height: 15vh;padding: 10px; margin-top:5px;
                background:#aff8af">
    <span class="class-name">Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum is simply dummy text of the printing and typesetting industry</span>
    </div>

Unpolled

How do you do the same fro three lines? – Anthropomorphous

Answer 4

Try the following css property:

.your-class-name {
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

Haynor

You need to post a demo because I think this does nothing. – Longinus

Answer 5

Can be done with CSS only using the line-clamp property

(See browsers support table)

It only works in combination with the display property set to -webkit-box or -webkit-inline-box and the -webkit-box-orient property set to vertical.

In most cases you will also want to set overflow to hidden, otherwise the contents won't be clipped but an ellipsis will still be shown after the specified number of lines.

Code:

p {
  font: 20px Arial;
  width: 400px;
  border: 1px dashed silver;  
  
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla</p>

Advantage