如何让行内元素换行并仅为文本添加背景（仅可使用样式）

这问题我太熟悉了！给元素加display: inline让背景只包裹文本后，它们就变成行内元素并排了，咱们完全可以用纯CSS搞定换行，不用加任何<br>或者其他HTML标签～

这里有几个靠谱的方法：

方法1：inline-block + 100%宽度（最直观） #

inline-block完美结合了行内元素和块级元素的特性——既能让背景只包裹文本内容，又支持设置宽度。把宽度设为100%后，每个元素都会独占一行，自动换行：

.your-text-element {
  background-color: #f0f0f0; /* 替换成你的背景色 */
  display: inline-block;
  width: 100%;
}

方法2：display: table（自适应宽度更灵活） #

如果不想强制占满整行，只是让元素自适应文本宽度且自动换行，用display: table是绝佳选择。table元素默认会自适应内容宽度，同时每个table元素都会自动换行，不需要额外设置：

.your-text-element {
  background-color: #f0f0f0;
  display: table;
}

方法3：修复::before换行的问题（如果你坚持用inline） #

你之前尝试的content: "\A"没生效，是因为行内元素默认不会解析换行符。只要给元素加上white-space: pre-line（或pre-wrap），就能让换行符生效。注意要给第一个元素去掉多余的空行：

.your-text-element {
  background-color: #f0f0f0;
  display: inline;
  white-space: pre-line;
}
/* 去掉第一个元素前的空行 */
.your-text-element:first-of-type::before {
  content: "";
}
/* 给后续元素添加换行 */
.your-text-element:not(:first-of-type)::before {
  content: "\A";
  white-space: pre;
}

个人更推荐方法1或2，代码更简洁，兼容性也更好～

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