CSS Width / Max-Width on Line Wrap?

by

Yes, that’s the normal behavior.

A browser will try to flow your text inline within the box until it reaches its maximum allowed width of 250px, then wrap to the next and subsequent lines any text that cannot fit on the first line. (If there is not enough text to reach the maximum width, then width: auto causes the box to shrink to fit just that amount of text.)

However, the box will not shrink again to fit the text after wrapping it, because text wrapping just doesn’t work that way. This means the box’s width is computed as 250px, and only because your CSS states that it can only be 250px at most. It’s not computed to some smaller value equal to the width of the text after wrapping then overridden by max-width.

I don’t think there is anything you can do to change this behavior.

More Related Contents:

  1. Transitions on the CSS display property
  2. How to use HTML to print header and footer on every printed page of a document?
  3. How to prevent long words from breaking my div?
  4. What is the best way to conditionally apply a class?
  5. CSS Page-Break Not Working in all Browsers
  6. What’s the difference between CSS classes .foo.bar (without space) and .foo .bar (with space) [duplicate]
  7. My CSS is not getting injected through my content script
  8. What is the difference between background and background-color
  9. CSS Styling Checkboxes
  10. Pressed selector
  11. Float:right reverses order of spans
  12. Two divs, one fixed width, the other, the rest
  13. Bootstrap dropdowns menus appearing behind other elements – IE7
  14. CSS: Top vs Margin-top
  15. How to make borders collapse (on a div)?
  16. Bug in CSS3 rotateY transition on Safari?
  17. CSS selector involving pseudo class first-child and dropcap
  18. Flip a 3D card with CSS
  19. How to create a radial menu in CSS?
  20. Overlay a background-image with an rgba background-color
  21. What does @-moz-document url-prefix() do?
  22. CSS select multiple descendants of another element
  23. Select all ‘tr’ except the first one
  24. Bootstrap – Removing padding or margin when screen size is smaller
  25. How to center multiple inline-block elements with CSS?
  26. Shrinking navigation bar when scrolling down (bootstrap3)
  27. How to combine and use multiple Next.js plugins
  28. Firefox blurs an image when scaled through external CSS or inline style.
  29. How to override stylesheets of PrimeFaces? [duplicate]
  30. How is padding-top as a percentage related to the parent’s width?

Leave a Comment