title: CSS switch between white-space nowrap and responsive width
body: <p>I'm designing a website to display well on screens of all sizes. One of the ways I'm using to display information is popups that appear when another element is hovered (this behavior works on mobile when the other element is touched). Because the popups are anchored to smaller elements, if I don't use <code>white-space: nowrap</code>, I find myself with absurdly small divs. But as the screen width decreases, large elements can cause the popups to overflow the screen horizontally.</p>
  
  <p>If this page were completely static, I could (laboriously) go through and specify a series of conditional statements based on screen size to set the width of the div and eliminate the <code>nowrap</code> style. However, each of the popups is filled with dynamically generated content.</p>
  
  <p>Is there a way in CSS to change between using <code>white-space:nowrap</code> to create nice looking divs on larger screens to a screen proportional width on smaller screens to prevent overflow. Failing that, what are my best options for achieving this behavior?</p>
  
  <p>EDIT: I have several of these elements. What I would like to do is transition from the <code>white-space:nowrap</code> style to a fixed width style (probably using <code>vw</code>) at a different screen width for each div, based on the size of the items in the div. One with very long lines would transition to a fixed width before one with very short lines.</p>
  
  <p>Fiddle <a href="https://jsfiddle.net/omk3vqy8/3/" rel="nofollow">here</a></p>