如何解决CSS中背景色超出文本范围的问题？

问题核心是当前使用的d-block类默认是块级元素（display: block），块级元素会自动撑满父容器的可用宽度，导致所有背景都匹配最长文本的宽度。

修复方案 #

修改.d-block的display属性为inline-block，让元素宽度由自身内容决定：

.d-block {
  display: inline-block; /* 替换原有display: block */
  background-color: map-get($theme-colors, 'gapped');
  border-radius: px-to-rem(4px);
  margin-bottom: px-to-rem(6px);
  margin-right: px-to-rem(6px);
  padding: px-to-rem(2px) px-to-rem(8px);
  position: relative;
}

原理说明 #

• inline-block兼具行内元素和块级元素的特性：既不会独占一行，又支持设置padding、margin、border等盒模型属性，宽度会完全适配内部文本的长度，完美实现每个文本对应独立背景宽度的需求。

如果不想修改原有d-block类的样式，也可以给span新增一个类来覆盖display属性：

JSX代码修改：

<td>{user.workforce_roles.filter((wf_role) => wf_role.role.visible).map((wf_role) => {
    return <span key={wf_role.id} className="d-block inline-fit">{wf_role.role.friendly_name}</span>;
  })}</td>

新增样式：

.inline-fit {
  display: inline-block;
}

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