如何用基础CSS或Tailwind CSS实现高亮铺满Div宽度而非文本末尾？

你需要的是行内文本换行时每一行都保持带圆角的背景高亮效果，以下是基础CSS和Tailwind CSS的实现方案，同时支持选中文本时的高亮：

一、基础CSS实现 #

1. 核心高亮样式 #

核心是利用 box-decoration-break: clone 属性，让行内元素的背景和圆角在换行时复制到每一行：

.highlight {
  background-color: #fef3c7; /* 匹配示例的浅黄色背景 */
  padding: 0.2em 0.4em;
  border-radius: 0.3em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone; /* 兼容WebKit内核浏览器 */
}

• 使用 <span class="highlight"> 包裹需要高亮的文本，即可实现自然换行时的逐行圆角高亮
• 用 em 单位适配不同字体大小，保证效果一致性

2. 选中文本时的高亮效果 #

覆盖浏览器默认的选中文本样式，让选中时也呈现同款高亮：

::selection {
  background-color: #fef3c7;
  color: inherit; /* 保留文本原有颜色 */
}
::-moz-selection { /* 兼容Firefox */
  background-color: #fef3c7;
  color: inherit;
}

二、Tailwind CSS实现 #

Tailwind没有内置 box-decoration-break 工具类，需要自定义后使用：

1. 自定义工具类 #

在 tailwind.config.js 中添加自定义工具类：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [
    ({ addUtilities }) => {
      addUtilities({
        '.box-decoration-clone': {
          'box-decoration-break': 'clone',
          '-webkit-box-decoration-break': 'clone',
        }
      })
    }
  ],
}

2. 应用高亮样式 #

在HTML中组合类名使用：

<span class="bg-amber-100 px-2 py-1 rounded-md box-decoration-clone">
  这是需要高亮的文本，支持自然换行，每一行都会保持圆角背景效果。
</span>

3. 自定义选中文本样式 #

在全局CSS中添加Tailwind层的自定义样式：

@layer utilities {
  ::selection {
    @apply bg-amber-100;
  }
  ::-moz-selection {
    @apply bg-amber-100;
  }
}

注意事项 #

• 必须使用行内元素（如 <span>）包裹文本，才能实现自然换行的逐行高亮效果
• box-decoration-break: clone 已被主流浏览器支持，无需担心兼容性问题

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