CODEWITHSUNDEEP
htmlcss
Balázs Szántó
Balázs Szántó

Reputation: 1500

How to use text-overflow properly to format text?

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!

Upvotes: 1

Views: 93

Answers (3)

Mr. Alien
Mr. Alien

Reputation: 157334

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..

Upvotes: 2

ra_sangeeth
ra_sangeeth

Reputation: 467

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

Upvotes: -1

Roko C. Buljan
Roko C. Buljan

Reputation: 206121

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>

Upvotes: 2

Related Questions