Question

如何根据我向右写的文字更改文字背后的背景。例如，如果文本代替＆＃34;标题＆＃34;会是＆＃34;他今天出去了＃34;然后背景应该突出显示直到＆＃34;今天＆＃34;即根据文本的长度。如果我写了更大的句子，那么背景应该根据句子向右伸展。

＆＃13;

.container-text {
      text-align: left;
      background-color: #F1F1F1;
    .text {
          font-family: "Sans"
    }
}

＆＃13;

<div class="container-text">
<div class="text">Title</div>
</div>

＆＃13;

Answer 1

您需要在css文件中的text之外指定.container-text类，然后使用display: inline-block;将div的宽度仅扩展到其内容：

＆＃13;

.container-text {
  text-align: left;
}
.text {
  background-color: #F1F1F1;
  font-family: "Sans";
  display: inline-block;
 }

＆＃13;

<div class="container-text">
  <div class="text">Title<div>
<div>

＆＃13;

Answer 2

你的代码错了。你的标签不会关闭......
你的课程错了 - 看看名字
这应该是正确的：

.text {
        display:inline-block;
        
        background-color: #F1F1F1;
         font-family: "Sans"
    }

<div class="container-text">
  <div class="text">Title Title Title</div>
</div>

Answer 3

试试这个。您可以使用伪代码来实现此目的。

＆＃13;

.container-text {
      text-align: left;
      width:100%;
      background-color: #F1F1F1;
}
.text {
      font-family: "Sans";
      position:relative;
      display:inline-block;
      z-index:3;
      color:#fff;
}
.text::before{position:absolute;content:"";background:#ff0000;left:0;top:0;right:0;bottom:0;z-index:-1;}

＆＃13;

    <div class="container-text">
    <div class="text">Title</div>
    </div>

＆＃13;

如何根据文字长度

3 个答案: