How to use text-overflow properly to format text?

Question

I have the following html element:

<h2>Download "<div id="title"></div>" for...</h2>

I want to insert a title with jquery inside the <div id="title"></div> and It should look like this way:

Download "The title is soo long long long ..." for ...

with this css/less:

#title{
   overflow: hidden;
   text-overflow:ellipsis;
}

But It looks this way:

Download "

The title is soo long long long ...

" for ...

I should see one line of text with splitted title, but instead I see three lines of text. How can I force to place the whole text to one line? Thanks!

I think you wouldn't have this problem if instead of a div you used ie a span... You wouldn't even need special CSS handling for that aspect at all.. — Joum
– Joum, Commented Aug 16, 2013 at 7:56
@Itay for that it is not enough, but that isn't showed as a requirement in th OP... Hence, I explicitly mention that aspect. And by that aspect I obviously mean the line breaking, not the text ellipsing. — Joum
– Joum, Commented Aug 16, 2013 at 8:02

Roko C. Buljan · Accepted Answer · 2013-08-16 07:56:59Z

2

The right way would be to use span element, and set to inline-block

http://jsbin.com/imutem/4/edit

#title{
   display:inline-block;
   vertical-align:bottom;
   overflow: hidden;
   width:200px;
   white-space: nowrap;
   text-overflow:ellipsis;
}

HTML:

<h2>Download "<span id="title"></span>" for...</h2>

answered Aug 16, 2013 at 7:56

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

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

4 Comments

Mr_Green Over a year ago

Why only span when you are using display: inline-block later?

Roko C. Buljan Over a year ago

@Mr_Green span elements are by default inline level elements, setting it to display-block (which is Xbrowser for span elements) you can than use overflow:hidden; What is not clear? You know the difference between inline-block and block right? Using span inside h2 (def:block-level) elements is always the right thing to do.

Mr. Alien Over a year ago

@Mr_Green also semantically if he is using this inside a p tag, using div will be incorrect, so you should use span for such things

Balázs Szántó Over a year ago

The only problem I still have, that Firefox aligns the text differently than chrome or safari. Is there a way to conditional set the alignment based on the browser type?

Mr. Alien · Accepted Answer · 2013-08-16 08:49:21Z

2

You are using text-overflow: ellipsis; which works when you've a single line, so you don't have to use for... actually, it will make something like sentence...for.... Also div is a block level element so you will have to use display: inline-block; and assign a fix width for your element.

Demo (Thanks to the comments below, though I was working on it..)

#title{
    overflow: hidden;
    text-overflow:ellipsis;
    display: inline-block;
    width: 100px;
    white-space: nowrap;
    vertical-align: bottom; /* This is important to align text right in the line */
}

Also, I would like to point out that you are using an id there, and id has to be unique, so just make sure you don't repeat, better use a class instead. Also for these purposes, span will be a better element to go for..

edited Aug 16, 2013 at 8:49

answered Aug 16, 2013 at 7:54

Mr. Alien

158k36 gold badges307 silver badges287 bronze badges

1 Comment

Itay Over a year ago

I think you should make that inline-block and set its width

ra_sangeeth · Accepted Answer · 2013-08-16 08:02:22Z

-1

use white-space:nowrap; and overflow:hidden; in #title

answered Aug 16, 2013 at 8:02

ra_sangeeth

4673 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to use text-overflow properly to format text?

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related