CODEWITHSUNDEEP
htmlcss
rampion
rampion

Reputation: 89053

CSS: hide element when container too narrow to let it be seen in its entirety

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?

Upvotes: 13

Views: 12314

Answers (4)

kerry okpere
kerry okpere

Reputation: 1

If I get you correctly, you would like to hide the #inner element when the #outer container becomes too narrow.

With the new CSS container queries API you can now query elements sizes just like you would viewport via media queries and apply styles to an element based on it's container.

Here is what it looks like:

#outer {
  container-type: inline-size; /* Declare a containment context */
  container-name: outer-container; /* Name the container */
}
    
@container outer-container (max-width: 500px) {
  #inner {
    display: none; /* Hides content when the container width is 500px or less */
  }
}
<div id="outer"><div id="inner">hide me when #outer is too small</div></div>

Lastly, I wrote about this topic here if you would like to find out more details about this API with practical examples.

Upvotes: 0

Christoph
Christoph

Reputation: 51211

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.

Upvotes: 9

nemuri
nemuri

Reputation: 203

This is possible without JS through floats and adding a helper inner element:

<div class="outer">
  <div class="helper"></div>
  <div class="inner">hide me when .outer is too small</div>
</div>

and css:

.outer {
  overflow: hidden;
}

.helper {
  width: 1px;
  height: 100%;
  float: left;
}

.inner {
  float: left;
}

The inner element will now wrap under the helper if it doesn't fit within the width of the outer element, which with .helper having height: 100% and .outer having overflow: hidden results in the inner element not being visible.

You could remove the 1px helper width by using width: 0.01px instead, but I'm not sure if that runs into browser compatibility issues.

Upvotes: 19

rampion
rampion

Reputation: 89053

Christoph's answer is probably best in the general case, but in my case, I knew the text content but not the container width, which let me add an additional layer of trickery:

Altering the HTML slightly:

<div id="first" class="container">
  <div><span>first_text_section</span></div>
</div>
<div id="second" class="container">
  <div><span>second_text_section</span></div>
</div>
<div id="third" class="container">
  <div><span>third_text_section</span></div>
</div>

And using the following CSS:

.container > div {
  color: transparent; /* don't show the text-overflow content */
  overflow: hidden;
  height: 1em;
  width: 100%;
}
/* use the actual text to get the measurement right for hiding */
#first > div { text-overflow: "first_text_section"; }
#second > div { text-overflow: "second_text_section"; }
#third > div { text-overflow: "third_text_section"; }
.container > div > span {
  color: black; /* do show the span when possible */
}

Then as the width of the container changes, the full text is either hidden or shown appropriately. If the text contained is more than one word, the text is hidden word by word, so that's something to be aware of.

Upvotes: 1

Related Questions