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

user_15065301 0
Viewed 349

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.

  • Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee
  • Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coffee Coff...
  • Milk

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

row line-breaks list css html
1 Answers

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

user_55126110
Related