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
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>
Comments
Post a Comment