how to apply ellipse effect in which contain space in string?

Question

i want to show ellipsis after some width.i want to do this with css. & only in one span tag.(no other tag should used label..etc). how can i achieve this.

<span>Name: Patrick Jonson</span>

output should be below one

Name: Patrick jon...

problem is that it break word when space appear.

Please help.

You should search for an answer before asking a question like this — Zach Saucier, Feb 28 '14 at 16:09
possible duplicate of [text-overflow: ellipsis not working](http://stackoverflow.com/questions/7993067/text-overflow-ellipsis-not-working) — Hashem Qolami, Feb 28 '14 at 16:10

score 1 · Accepted Answer · answered Feb 28 '14 at 16:08

1

If I understand correctly...this is straightforward enough to accomplish-

Demo Fiddle

HTML

<span class='ellipsis'>Name: Patrick Jonson</span>

CSS

span.ellipsis{
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    width:130px;
    display:inline-block;
}

answered Feb 28 '14 at 16:08

SW4

69,876
20
132
137

this cant be accomplished with CSS alone unfortunately. – SW4 Feb 28 '14 at 16:14
This only works if the content is static. In which case, boom indeed! – SW4 Feb 28 '14 at 16:21

how to apply ellipse effect in which contain space in string?

1 Answers1

Demo Fiddle