CSS- Automatically shorten long strings using ellipsis

Question

Hi i am shortening long strings using ellipsis and putting dotes(...) at end. The problem is if a string contains space then i want to break string first then if it overflows then put dotes(...). E.g. I have two strings

Choreographers  Farm Houses

If i don't use ellipsis then on resizing window Choreographers overlaps Farm Houses...

When i use ellipsis then on resizing window i get

Choreogra...    Farm Ho...

What i want is

Choreogra...      Farm
                  Houses

And in case of more smaller screen

Chore...         Farm
                 Hous...

Fiddle: https://jsfiddle.net/7fpt4m5e/3/

@connexo Okay thanks...Is it possible to achieve what i want ?? — Ashish, Dec 28 '16 at 11:58

score 4 · Accepted Answer · edited May 23 '17 at 10:30

4

Remove the white-space: nowrap ... though text-overflow has bad browser support for multiline

Updated fiddle

.block2 p {
  overflow:hidden;
  text-overflow:ellipsis;
  width:98%;
}

Check this post, applying-an-ellipsis-to-multiline-text, there you will find many more ways how to

edited May 23 '17 at 10:30

Community

1
1

answered Dec 28 '16 at 11:59

Asons

81,773
12
93
144

score 0 · Answer 2 · answered Dec 28 '16 at 11:59

Instead of writing "Farm Houses" you should write "Farm Houses", this way it does the effect you want to achieve. This solution also answers to the bad support in browsers of white-space: nowrap or text-overflow

https://jsfiddle.net/7fpt4m5e/6/

Works on all browsers as it doesn't need special support.

nashcheez · Answer 3 · 2016-12-28T12:08:02.670

Unfortunately, text-overflow: ellipsis will only truncate single lines.

However what you can do here is to use line-clamp which should work on webkit browsers & Firefox.

Here you mention the number of lines you want after which truncation to happen in -webkit-line-clamp & -moz-line-clamp.

Example of a line-clamp usage is:

div {
  max-height: 42px;
  width: 40px;
  margin-bottom: 10px;
  font-size: 16px;
  overflow: hidden;
  color: #000;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  -moz-line-clamp: 2;
  -moz-box-orient: vertical;
}

<div>the quick brown fox jumps over the lazy dog</div>
<div>the quick brown fox jumps over the lazy dog</div>

Otherwise, you can go the handle-your-own-pseudo-selectors-with-content-("...") way too.

CSS- Automatically shorten long strings using ellipsis

3 Answers3