Question

Possible Duplicate:
Add link icon that breaks with last word?

When text is too long for a container I would like to break the last word onto a new line rather then just the background image that appears after it.

Here is an iamge of the issue:

I would like the word “too.” to break to the next line along with the background-image.

Here is the HTML:

<ul>
    <li><a href="#" class="myIcon">The name of some link goes here</a></li>
    <li><a href="#" class="myIcon">The name of some link goes here too.</a></li>
    <li><a href="#" class="myIcon">Here is yet another link that could be used</a></li>
    <li><a href="#" class="myIcon">This could be a really long link that one could try to use also</a></li>
    <li><a href="#">The name of some link goes here.</a></li>
    <li><a href="#">The name of some link goes here.</a></li>
    <li><a href="#">The name of some link goes here.</a></li>
</ul>

Here is the CSS:

.myIcon:after {
    height: 16px;
    width: 16px;
    display:inline-block;
    content:'';
    background-image: url("/wps/themes/html/3M.com/images/ui-icons_000000_256x240.png");
    vertical-align:middle;
}

Answer 1

Unfortunately I think to ensure that this works across browsers you will have to wrap the last word in a span and then apply the icon to the span.

<li><a href="#">This could be a really long link that one could try to use <span class="myIcon">also</span></a></li>

CSS:

.myIcon {
    display:inline-block;
    background: url("/wps/themes/html/3M.com/images/ui-icons_000000_256x240.png") no-repeat center right;
    padding-right:16px;
    white-space:nowrap;
    text-decoration:underline;
}

Example is here