CSS word-break combined with text-overflow

Question

So I am trying to combine word-break with text-overflow which does work at some point but not how it should be.

For example, I have set up this Fiddle

CSS:

width: 200px;
padding: 8px;
border:1px solid blue;
word-break: break-word;
height: 100px;
overflow: hidden;
text-overflow:ellipsis;
white-space:nowrap;

For clarification, once text is broken in to parts it should fill box and at the end of the text there should be 3 dots. Currently there is just a single line where it works.

FWIW: There is a proposal and discussion in [email protected] mailing-list as for using text-overflow for multiline texts. — Marat Tanalin
– Marat Tanalin, Commented Dec 15, 2012 at 19:15

Pranav 웃 · Accepted Answer · 2012-12-15 19:07:57Z

3

As far as I know, this is not possible using CSS.

The only thing you could do is specify the height, and overflow:hidden. (No ellipsis in the end.)

This is stated in the W3 spec for text-overflow.

ellipsis
an ellipsis string is inserted at each box boundaries where a text overflow occurs. The values of these ellipsis strings is determined by the 'text-overflow-ellipsis' property. The insertions take place at the boundary of the last full glyph representation of a line of text
...
In other words, the text-overflow-mode only affects the textual content of a block element which participate in its own inline flow.

You will need to use JavaScript for achieving this.

Here is an example of a jQuery plugin : http://pvdspek.github.com/jquery.autoellipsis/

edited Dec 15, 2012 at 19:07

answered Dec 15, 2012 at 19:02

Pranav 웃

8,4676 gold badges41 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS word-break combined with text-overflow

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related