Question

Is there any CSS workaround to make the pdf/doc/ppt icon always sit at the end of text line, without using a background image? When there is not enough space for the icon image, it will sit in second line alone. I’m wondering if there is anything similar as white-space:nowrap?

<ul>
    <li>
        <a href="v1.pdf">Lorem Ipsum is simaorem Ipsum.  (3MB, PDF)</a>
        <img src="images/pdf.gif" />
    </li>
</ul>

<ul> has a fixed width.

Answer 1

Images are text, or “inline content,” from the perspective of layout. Thus, you can use same techniques as for preventing line breaks in text. The nobr markup prevents line breaks and works universally in browsers, though standards-writers have frowned upon it. If needed you can use its standardized, less reliable, more verbose sister: white-space: nowrap in CSS, together with some inline markup like span.

Here the problem is that you would need “overlapping” markup: … (3MB, <nobr>PDF)</a><img ...></nobr> (i.e., open a nobr element inside the a element but close the a before nobr). While this works, it violates HTML syntax rules, so I’d suggest that you move some text out of the a element (it probably does not need to be there):

<a href="v1.pdf">Lorem Ipsum is simaorem Ipsum.</a>  (3MB, <nobr>PDF)
<img src="images/pdf.gif" alt=""></nobr>

or

<a href="v1.pdf">Lorem Ipsum is simaorem Ipsum.</a>  (3MB, <span 
style="white-space: nowrap">PDF) <img src="images/pdf.gif" alt=""></span>