如何在HTML5、CSS3中为文本紧凑设置背景色？

嘿，我来帮你搞定这个问题！你想要的是让背景色精准紧贴文本内容，而不是撑满整个容器的宽度对吧？

你的现有代码里，<p class="text">是块级元素，默认会占满父元素的全部宽度，所以hover时背景色会铺满整行。要实现紧凑的文本背景效果，只需要做几个简单的CSS调整：

核心解决方案 #

1. 修改元素的显示类型：给.text类添加display: inline-block;，这样元素的宽度会自动适配文本内容，背景色就只会包裹文字本身，不会延伸到整行。
2. 微调内边距（可选）：可以加一点padding来控制背景和文字的间距，避免文字和背景边缘贴得太挤，让视觉效果更舒服。
3. 清除默认间距（可选）：去掉<p>元素默认的margin，避免文本周围出现不必要的空白。

修改后的完整代码 #

<!-- 第6章练习题4 -->
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <style>
        img{
            margin-left: auto;
            margin-right: auto;
            display: block;
        }
        .hyper{
            text-decoration-line:none;
        }
        .text{
            display: inline-block; /* 关键：让宽度贴合文本 */
            padding: 3px 6px; /* 可选：调整背景与文本的间距 */
            border : 1px solid black;
            text-align: center;
            color:black;
            margin: 0; /* 清除p元素默认的外边距 */
        }
        .text:hover{
            background-color:yellow;
            color: red;
            text-decoration-line:none;
        }
    </style>
</head>
<body>
    <img src="images/book.png" >
    <a href="http://naver.com" class="hyper">
        <p class="text">你的目标文本内容</p>
    </a>
</body>
</html>

额外场景：段落内的局部文本 #

如果是想给段落中的某部分文字添加紧凑背景（而不是整个段落），可以用<span>代替<p>，因为<span>是天然的行内元素，直接给它加.text类就能实现精准包裹：

<p>这是一段普通文本，<span class="text">这段文字有紧凑背景色</span>，其余部分保持原样。</p>

这样调整后，背景色就会完美贴合文本的范围，完全符合你要的“紧凑”效果啦！

内容的提问来源于stack exchange，提问作者younmi-song