css样式 文字内容撑开盒子

一串代码解决自己 需求非常easy 工作需求也经常用到的 一开始想到使用width: min-content; 自适应内部元素 会失效

   html
   
<div class="vr_title">
    官方回的1111
</div>

css

.vr_title{
    position: absolute;
    left: 0;
    top: 0;
    margin-top: 20px;

    height: 26px;
    line-height: 26px;
    // width: min-content;
    display: inline-block;
    padding: 0 12px;

    background: #FDA82C;
    border-radius: 8px;
    opacity: 0.6;
    backdrop-filter: blur(10px);

    text-align: center;
    letter-spacing: 1px;
    font-size: 24px;
    font-weight: 400;
    color: #FFFFFF;

}