How to truncate a text in a html

Question

I want to truncate a text in a html page.

style.css:

p {
 height: 30%;
 overflow: hidden;
 text-overflow: ellipsis;
}

index.html

<p>
    hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
</p>

I want to get a result such:

hhhhhhhhhhhhhhhhhhhhhhhhhhhhh
hhhhhhhhhhhhhhhhhhhhhhhhhhhhh
hhhhhhhhhhhhhhhhhhhhhhhhhhhhh
hhhhhhhhhhhhhhhhhhhhhhhhhh...

But I can't got this result using the style.css mentioned below.How can I fix it?

Possible duplicate of [Applying an ellipsis to multiline text](https://stackoverflow.com/questions/33058004/applying-an-ellipsis-to-multiline-text) — CBroe, May 29 '17 at 11:05

Rahul · Answer 1 · 2017-05-29T11:11:29.447

4

you maybe looking for this

p{
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    height:56px;
}

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</p>

Note: its only works on webkit browsers

edited May 29 '17 at 11:11

answered May 29 '17 at 11:08

Rahul

4,294
1
10
12

it's not browser compatible. it works only in `webkit` – Super User May 29 '17 at 11:10
yep was adding this on ans itself – Rahul May 29 '17 at 11:12

score 3 · Answer 2 · answered May 29 '17 at 11:00

3

The CSS-Rule word-wrap: break-word; will force even long words like yours to break at the end of the div. You can also limit the width of the div to have a similar effect as you postet.

p {
  height: 30%;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  width: 200px;
}

<p>
 hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
</p>

answered May 29 '17 at 11:00

CoderPi

12,985
4
34
62

if you use `word-wrap` the `ellipsis` won't apply here. – Super User May 29 '17 at 11:02
@SuperUser yes thats true. Do you have a solution to this? – CoderPi May 29 '17 at 11:04
I want to display the `...` when the the text was overflowed – para club101 May 29 '17 at 11:04
no i don't have any solution, but OP wants both thing, `ellipsis` with `word-wrap`... – Super User May 29 '17 at 11:05
@paraclub101 a quick internet search: https://stackoverflow.com/questions/13895028/css-word-break-combined-with-text-overflow – CoderPi May 29 '17 at 11:05
@paraclub101 if you want only webkit fixes then you can take reference from https://codepen.io/chriscoyier/pen/iBtep – Super User May 29 '17 at 11:09

score 0 · Answer 3 · answered May 29 '17 at 11:17

Here is what it is normally used when it is expected that long words will be introduced that will break your layout.

p { overflow-wrap: break-word }

This will cause that lines will break between any two characters. You can also use:

word-break: break-all

... if you expect Chinese, Japanese, and Korean to be inserted in the field.

score 0 · Answer 4 · answered Nov 20 '20 at 19:54

Using Bootstrap:

<!-- Block level -->
<div class="row">
  <div class="col-2 text-truncate">
    Praeterea iter est quasdam res quas ex communi.
  </div>
</div>

<!-- Inline level -->
  <span class="d-inline-block text-truncate" style="max-width:150px;">
    Praeterea iter est quasdam res quas ex> communi.
</span>

Will give you:

Praeterea iter e...

Praeterea iter est q...

More at: Bootstrap Text

How to truncate a text in a html

4 Answers4

Linked