Question

Suppose I have an outer container of unknown fixed width, and an inner element, like so:

<div id="outer"><div id="inner">hide me when #outer is too small</div></div>

Is there a way I can make #inner entirely hidden (not just clipped) when #outer is not wide enough to show it in its entirety using pure CSS?

Answer 1

This is not possible via pure CSS, since you cannot provide conditions (if you don’t use IE .htc files;) ). You need to use JS for that and compare both elements width.

For text you can use: text-overflow:clip|ellispis;

Edit:

#inner {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

could be helpful.

EDIT:

I prepared a fiddle for rampion’s solution. Note that the text-overflow with a custom string is only working in FF. Additionally, text-overflow is not standardized yet. W3C currently states it as text-overflow-mode in its working draft. See also an interesting article at MDN.