Badge list

Visual design

There should be enough space between lines of text that both contain tags. My expectation was that line-height should be configured to do this, but that doesn't appear to work well for inline-block elements without explicit height. For now we will use margin instead.
Word breaking should be considered for long tags at the end of a line.

Experiment

Experiment with a tag list inside a narrow column

CSS code for tag list spanning multiple lines

.example-box {
  width: 25ch;
}

ul.example-inline-list {
  display: inline;
  padding: 0;
}

.example-inline-list > li {
  display: inline;
  list-style: none;
}

.example-badge-list nih-category-badge {
  margin-block: 0.5ex;
}

Wesley Crusher has a weblog.

Tags:

Space
Sci-Fi
Weblogs
Etc.
Etc.
Etc.
Etc.
Etc.
Etc.
Etc.
Etc.
Etc.
Etc.

Experiment with multi-line badge content

CSS code to prevent displaying multi-line badge content

This example uses the experimental CSS property -webkit-line-clamp. The code should be updated when the standardized line-clamp property becomes available.

.example-category-badge--clamp {
  display: -webkit-inline-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

Tags:

Quite Interesting For A Select Few
Category with a relatively long name for a small component such as the badge