How to glue :after to last word - css

Question

I has this code
.cont {
width: 150px;
overflow: hidden;
resize: both;
border: solid;
}
.wrap:after {
content: 'A';
background: #ccc;
display: inline;
}
<div class="cont">
<span class="wrap">
<span class="inner">
Hello, my name is Mao
</span>
<span class="emptyornot">
</span>
</span>
</div>
http://jsfiddle.net/rcsd7L74/
I need that :after always stay with last word in .wrap.
And if container too small - break line before last word.

Answer 1

The CSS you have will do this perfectly well; the problem you're having is that new-lines, in HTML, collapse to a single white-space character; remove those and it works (leading to this, admittedly ugly, HTML):
<div class="cont">
<span class="wrap">
<span class="inner">
Hello, my name is Mao</span><span class="emptyornot"></span></span>
</div>
To allow for slightly prettier HTML (though, in fairness, HTML should be minimsed when sent to the client anyway), such as:
<div class="cont">
<span class="wrap">
<span class="inner">
Hello, my name is Mao</span>
<span class="emptyornot"></span>
</span>
</div>
JS Fiddle demo.
The following CSS can be used:
.wrap {
/* sets the wrapping element's font-size to 0, to hide the collapsed white-spaces: */
font-size: 0;
}
.inner {
/* overrides the parent's font-size:
font-size: 16px;
}
.wrap:after {
/* as above, to make the text of the pseudo element visible */
/* no other changes */
font-size: 16px;
}
JS Fiddle demo.

Answer 2

Change width:
.cont { width: 160px }