CSS selector if sibling div overflows?

Question

I have the following html

<!-- initial height is enough to show one line of text -->
<div id="div1"> some dynamic text </div>

   .
   .
   .

<!-- on clicking uses JS to set height of div1 to fit content
     only show if div1 has text overflowing -->
<div id="div2"> expand div1 </div>

Now, I want to show div2 only if div1 has enough text that it needs to be expanded, that is, if the content in div1 is overflowing. I know it can be achieved using JavaScript, but I want to know if it can be done using CSS exclusively.

Any suggestions?

Edit:
The text is dynamically fetched when a page is rendered. I can also not use media rules since the width at which I hide the expansion div is not fixed (the width threshold depends on the length of dynamic text which changes on each render)

Does this answer your question? [Display read more button](https://stackoverflow.com/questions/30817910/display-read-more-button) — adampweb, Nov 23 '20 at 12:07

score 1 · Accepted Answer · answered Nov 23 '20 at 12:48

As CBroe mentioned there is no selector for overflow detection. What you try to do is currently not possible using CSS only.

Additionally there is a GitHub issue with proposal to add such selector, but probably it will be closed with WON'T FIX

Mentioned GitHub issue: link

CSS selector if sibling div overflows?

1 Answers1