Line wrapping moves text or an inline-level element onto a subsequent line when it exceeds the available inline space. In inline layouts, wrapping can expose a line-height problem: padding makes an item taller without increasing the text line’s height, so backgrounds may overlap across rows. section 12.1.3
Wrapping tag lists
A tag list can use inline items with padding, backgrounds, and rounded corners. When the list wraps, increase each item’s line-height, such as with line-height: 2.6. Inline items also allow text inside an item, such as “Windows Phone,” to wrap; flex items and inline-block elements keep the entire item together instead. section 12.1.3
Choose the layout model according to how wrapping should behave:
- Use inline elements when natural whitespace should separate items and text inside an item may wrap. section 12.1.3
- Use flexbox or inline-block when each item should move as a whole; provide horizontal and vertical margins for spacing. section 12.1.3
- Enable flex-item wrapping when a flex layout needs items to occupy additional lines, alongside its alignment and spacing controls. section 4.4
Testing long headings
Temporarily add text to headings to force wrapping, then inspect the vertical spacing and line-height at the intended type size. This catches problems that short sample headings conceal. section 12.6.2
Listing 12.5 Styling the tags
@layer modules {
.tag-list {
list-style: none; #1
padding-inline-start: unset; #1
}
.tag-list > li {
display: inline;
padding: 0.3rem 0.5rem;
font-size: 0.8rem;
border-radius: 0.2rem;
background-color: var(--light-gray);
line-height: 2.6; #2
}
}
Use the tag-list stylesheet to see how inline display, padding, and increased line-height prevent wrapped rows from overlapping. section 12.1.3
