Web development
Build better.
Practical lessons for your next project.
Explore lessons
A longer heading.
A broken layout.
Break it. Understand it. Fix it.
- 1Break it
- 2Try a fix
- 3Take it with you
01 / Stress the content
Start with the long heading. Can the card keep all its words inside without making the text smaller?
02 / Choose a fix
Try a solution. Watch what changes.
The heading has white-space: nowrap. What happens when a sentence is forced onto one line?
Ready for a longer heading?
The short title fits. Select Long heading to test the same layout with more content.
Narrow: not checked
Wide: not checked
03 / Why this happens
This example deliberately uses white-space: nowrap. It prevents normal line breaks. A short title hides the problem; longer content reveals it.
Headings normally wrap. The problem here is the added CSS rule, not the heading element itself.
.card__heading {
font-size: 2rem;
white-space: nowrap;
}
Keep the words. Let the layout adapt.
You tested the long heading at both sizes without shrinking or hiding the text. The card can now grow with its content.
Use this in Oxygen
Select the heading and remove any rule that forces a single line. If a custom class adds white-space: nowrap, replace it with white-space: normal. Add overflow-wrap: anywhere for long unbroken words. Let the card height grow with its content.
Apply the CSS above to your own heading class, then check the actual frontend with longer text at narrow and wide widths. Other causes, such as a fixed-width parent or a flex item's minimum size, need their own fix.