如何实现圆形span内文本换行且保持圆形样式？

你的问题核心是当前圆形徽章会随长文本无限扩大，同时文本无法自动换行。可通过以下CSS调整实现需求：

关键修改点 #

• 限制圆形徽章的最大宽度，避免文本过长导致徽章过度放大
• 开启文本自动换行并居中对齐
• 调整flex布局的内容换行规则

修改后的完整CSS代码 #

.wb_badge {
  position: absolute;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 12px;
  min-width: 15px;
  min-height: 15px;
  max-width: 80px; /* 限制最大宽度，可根据需求调整数值 */
  font-size: 14px;
  font-weight: bold;
  word-wrap: break-word; /* 强制长文本换行 */
  text-align: center; /* 换行后文本居中 */
  flex-wrap: wrap; /* 允许flex容器内内容换行 */
}

.wb_badge-rounded {
  border-radius: 50%;
}

.wb_badge-rounded::after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

改动说明 #

1. max-width：给徽章设置最大宽度，避免文本过长时徽章无限放大，数值可根据实际需求调整；如果需要固定尺寸，也可以将max-width替换为width设置固定值。
2. word-wrap: break-word：强制长单词或连续文本在容器宽度范围内自动换行，解决文本不折行的问题。
3. text-align: center：让换行后的文本保持居中对齐，保证视觉美观。
4. flex-wrap: wrap：配合inline-flex布局，允许容器内的文本内容自动换行，避免布局挤压变形。

内容的提问来源于stack exchange，提问作者howtogeek24