html - How to use text-overflow properly to format text? -

i have following html element:

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

i want insert title jquery inside <div id="title"></div> , should way:

download "the title soo long long long ..." ...

with css/less:

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

but looks way:

download "

the title soo long long long ...

" ...

i should see 1 line of text splitted title, instead see 3 lines of text. how can force place whole text 1 line? thanks!

the right way use span element, , set inline-block

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

Detect