text-overflow ellipsis

narutoroot

New Member
I have such html code \[code\]<li> <strong>Name Lastname<span>1</span></strong> <span>ok</span> <date>Monday, 10th Dec 2012</date></li>\[/code\]and css\[code\]li { padding: 0 10px;}strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}strong span { display: inline-block; margin-left: 10px; padding: 3px 12px; border-radius: 15px; color: #fff; vertical-align: middle; background-color: #9c0;}date { float: right; margin-top: 7px; color: #555; text-align: right; text-transform: uppercase;}\[/code\]When I resize window, I want that my span will be always at the right side of the text in strong element. If the window is narrow, text should be overflowed and span visible.Please see attached imagesWhat I want
PkH2H.png
QqjJc.png
What I have:
3rz63.png
If I give position absolute for span it works for narrow window, but not for wide (inversely to first solution).
6UeJR.png
4tjrb.png
Kris.
 
Back
Top