CODEWITHSUNDEEP
htmlcsslistrowline-breaks
Moritz
Moritz

Reputation: 457

How do I detect an automatic line break in a html list and change the text content so that the line break is avoided?

I have a list with text as entries. When minimizing the screen there are some automatic line breaks so that the text still fits in the row. However, I want all rows to have the same size and therefore dont want any line breaks. For example it would just show as much as possible from the text content and then add three points so that there is no line break. Below is an example. The first row is what happens when the text content is too long and the second row shows how I want it to look in that case.

I would be happy if you had an idea how to help.

Upvotes: 2

Views: 1124

Answers (1)

Huy
Huy

Reputation: 3363

Try text-overflow property as below

<p class="abc">huy nguyen huy nguyen huy nguyen nguyen huy nguyen hen huy nguyen huy nguyen nguyen huy nguyen hen huy nguyen huy nguyen nguyen huy nguyen hen huy nguyen huy nguyen nguyen huy nguyen hen huy nguyen huy nguyen nguyen huy nguyen huy nguyen huy huy nguyen huy nguyen</p>

.abc {
    text-overflow: ellipsis;
    // you need this two below to make it work
    white-space: nowrap;
    overflow: hidden;
}

(Of course you can also do it in javascript, check it out here: Show short text when text is long?)

Take a look at it here for more about text-overflow: https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

Upvotes: 1

Related Questions