javascript - Replace content from a Span by "..." after 70% of parent's width -

update: actual problem: why "(ciclo)" go line bit lower rest? : http://jsfiddle.net/mv8q5/2/

---

example: http://jsfiddle.net/vahcs/

i have structure:

<div> <span class="limitcharacters">content limit</span><span>(ciclo)</span> </div> 

what want that, if limitcharacters span content occupies more 70% of it's parent's div width, jquery must remove rest of span replacing "...". shows in single line remained content of span, plus "...", plus inline span goes right after limitcharacters class span (in above code, "(ciclo)").

i solved calculating limitcharacters' % width based on it's parent (calculates correctly), , in case result 70 or more, adjust span's width 60%. problem must avoid line break, , can done white-space: nowrap css method, result 60% not apply.

what need this:

what have (see jsfiddle):

if avoid using nowrap method, breaks line.

if use overflow:hidden, takes out "..." , puts second ("ciclo") in lower line height reaon not know (see example): http://jsfiddle.net/vahcs/

you use text-overflow: ellipsis; c.f css tricks