concealing additional content within a DIV using ellipsis

Question

Looking to conceal additional text within my DIV element with ellipsis (...) at the end

Currently using:

<div style="width:200px; height:2em; line-height:2em; overflow:hidden;" id="box">
 this is text this is text this is text this is text
</div>

Result:
The content overflowing the DIV is hidden
However, I would like three dots ... to be added at the end when hiding occurs

Desired Output:
this is text this is text this is te...

Answer 1

Answer №1

Check out this solution that utilizes the text-overflow:ellipsis property:

.ellipsis {
    width:200px;
    height:2em;
    line-height:2em;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

Answer 2

Check out this solution that utilizes the text-overflow:ellipsis property:

.ellipsis {
    width:200px;
    height:2em;
    line-height:2em;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

Answer 3

The term you seek is ellipsis, which is used to indicate the omission of words in a sentence.

Here's an illustration showcasing its application:

Answer 4

The term you seek is ellipsis, which is used to indicate the omission of words in a sentence.

Here's an illustration showcasing its application:

Answer 5

One way to achieve this is by incorporating a straightforward javascript function, particularly with the assistance of jQuery:

jQuery('#box').html(jQuery('#box').html().substr(0,30) + '...');

With this approach, the initial 30 characters will be displayed alongside three dots for truncation.

Answer 6

One way to achieve this is by incorporating a straightforward javascript function, particularly with the assistance of jQuery:

jQuery('#box').html(jQuery('#box').html().substr(0,30) + '...');

With this approach, the initial 30 characters will be displayed alongside three dots for truncation.