Simple way to truncate text

Question

Possible Duplicate:
Overflow:hidden dots at the end

I'm coding a simple chat webapp, and I want to truncate the name of each participant. For instance, instead of:

Miguel de Unamuno: 03:14 
    Homo sum, nihil homini alienum puto

I want:

Miguel de U...: 03:14 
    Homo sum, nihil homini alienum puto

I see I could do this with JS, but seems like it should be quite a common thing, so I'm sure there is a simple way to do this with HTML+CSS I am not being able to find. Is it?

Thanks!

score 3 · Answer 1 · answered Dec 28 '12 at 08:50

3

see demo: http://jsfiddle.net/45Fc6/

try this css:

.ellipsis-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 80px;
}

answered Dec 28 '12 at 08:50

phnkha

7,782
2
24
31

score 1 · Answer 2 · answered Dec 28 '12 at 08:51

1

You can use text-overflow: ellipsis to truncate the text:

div {
    width: 50px;

    white-space: nowrap;
    overflow: hidden;

    text-overflow: ellipsis;
}

Demo: http://jsfiddle.net/Zn7tY/1/

answered Dec 28 '12 at 08:51

Blender

289,723
53
439
496

score 1 · Accepted Answer · answered Dec 28 '12 at 08:51

Use ellipsis

HTML

<span>Miguel de Unamuno:</span> 03:14 
<p> Homo sum, nihil homini alienum puto</p>

CSS

span {
    border: 1px solid #000000;
    white-space: nowrap;
    width: 95px;
    overflow: hidden;
    text-overflow: ellipsis; display:inline-block
}

DEMO

Simple way to truncate text

3 Answers3