CSS缩小text view容器大小：h3用户名标签占满页面全宽如何解决

原生<h3>标签属于块级元素，默认宽度会撑满父容器的100%，因此你设置的背景色会铺满整行，和预期的「背景仅包裹用户名文本」的效果不符，可通过以下几种方案调整：

方案1：设置宽度自适应内容 #

给h3添加width: fit-content属性，容器宽度会自动匹配内部文本的实际宽度，同时保留h3的块级排列特性，不会和后续元素排在同一行：

h3{
    font-weight: bold;
    color: #675eaf;
    background-color: #f2f2f2;
    padding: 8px;
    font-size: 1.5vw;
    /* 新增以下代码，兼容旧版浏览器 */
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}

方案2：修改为行内块元素 #

如果允许该用户名标签和其他行内/行内块元素排在同一行，可修改display属性为inline-block：

h3{
    font-weight: bold;
    color: #675eaf;
    background-color: #f2f2f2;
    padding: 8px;
    font-size: 1.5vw;
    /* 新增这行 */
    display: inline-block;
}

方案3：单独给文本套行内标签 #

如果不想修改h3的默认块级特性，可将用户名文本单独用<span>标签包裹，把背景样式迁移到span上：
HTML结构调整为：

<h3><span>实际用户名</span></h3>

CSS调整为：

h3{
    font-weight: bold;
    font-size: 1.5vw;
}
h3 span{
    color: #675eaf;
    background-color: #f2f2f2;
    padding: 8px;
}

span是原生行内元素，默认宽度完全匹配内容大小，刚好符合需求。

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