css - How to glue :after to last word -

i has code

<div class="cont"> <span class="wrap">     <span class="inner">         hello, name mao     </span>     <span class="emptyornot">     </span> </span> 

.cont { width: 150px }  .wrap:after  {     content: 'a';     background: #ccc;     display: inline; } 

http://jsfiddle.net/rcsd7l74/

i need :after stay last word in .wrap. , if container small - break line before last word.

the css have well; problem you're having new-lines, in html, collapse single white-space character; remove , works (leading this, admittedly ugly, html):

<div class="cont">     <span class="wrap">         <span class="inner">             hello, name mao</span><span class="emptyornot"></span></span> </div> 

to allow prettier html (though, in fairness, html should minimsed when sent client anyway), such as:

<div class="cont">     <span class="wrap">         <span class="inner">             hello, name mao</span>         <span class="emptyornot"></span>     </span> </div> 

js fiddle demo.

the following css can used:

.wrap {     /* sets wrapping element's font-size 0, hide collapsed white-spaces: */     font-size: 0; } .inner {     /* overrides parent's font-size:     font-size: 16px; } .wrap:after {     /* above, make text of pseudo element visible */     /* no other changes */     font-size: 16px; } 

js fiddle demo.