如何强制跨度的背景颜色为 100% 宽度？

Question

我正在尝试强制跨度元素背景成为父的完整宽度。

heads向上
是的……我完全知道做divs…

（但Divs更像是一个黑客，而不是对问题的实际解决方案）

由于其文本流动性，必须与跨度相似。
必须在pre标签中。

结构设置必须为

<div>
<pre>
text text text <span> text text
text text </span>
</pre>
</div>

我拥有的

div {
  width: 100%;
  background: rgba(54, 188, 255, 0.05);
  color: #515D6F;
}
.one {
  background: rgba(54, 188, 255, 0.15);
  color: rgba(54, 188, 255, 1);
}

<div>
  <pre>
 
Here is something<span class="one"> hello 
there
      how are you
      are you
      are you
      are you</span>
    
Here is something else
</pre>
</div>

我要实现的目标

body {
  margin: 0;
  padding: 0;
}
.container {
  width: 100%;
  background: rgba(54, 188, 255, 0.05);
  color: #515D6F;
}
.one {
  background: rgba(54, 188, 255, 0.15);
  color: rgba(54, 188, 255, 1);
  position: absolute;
  right: 0;
  width: calc(100% - 133px);
}
.left {
  width: 140px;
  position: absolute;
}
.demo {
  color: rgba(54, 188, 255, 1);
  background: rgba(54, 188, 255, 0.15);
}

<div class="container">
  <pre>
<div class="left">Here is something</div><div class="one right"> hello</div>
<div class="demo">
there
      how are you
      are you
      are you
      are you</div>
Here is something else
  </pre>
</div>

Answer 1

我可以提出的第一个解决方案是以下内容：

div {
  display: table;      /* without these 2 lines, iOS Safari ignores */
  table-layout: fixed; /* the width setting... maybe a bug?         */
  width: 100%;
  background: rgba(54, 188, 255, 0.05);
  color: #515D6F;
  overflow: hidden;
}
.one {
  background: rgba(54, 188, 255, 0.15);
  color: rgba(54, 188, 255, 1);
  padding-right: 100vw;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

<div>
  <pre>
 
Here is something<span class="one"> hello 
there
      how are you
      are you
      are you
      are you</span>
    
Here is something else
</pre>
</div>

已知的缺点：此解决方案几乎不依赖于容器宽度中的文本拟合，因为它基本上在每条线的右侧都会获得恒定量的彩绘区域，而该区域比被切入容器边缘的幅度。如果是不可接受的，则有另一种基于使用阴影的方法：

div {
  width: 100%;
  background: rgba(54, 188, 255, 0.05);
  color: #515D6F;
  overflow: auto;
}
.one {
  background: #d8f2ff;
  box-shadow: 20px 0 0 0 #d8f2ff,
              40px 0 0 0 #d8f2ff,
              60px 0 0 0 #d8f2ff,
              80px 0 0 0 #d8f2ff,
              100px 0 0 0 #d8f2ff,
              120px 0 0 0 #d8f2ff,
              140px 0 0 0 #d8f2ff,
              160px 0 0 0 #d8f2ff,
              180px 0 0 0 #d8f2ff,
              200px 0 0 0 #d8f2ff,
              220px 0 0 0 #d8f2ff,
              240px 0 0 0 #d8f2ff,
              260px 0 0 0 #d8f2ff,
              280px 0 0 0 #d8f2ff,
              300px 0 0 0 #d8f2ff,
              320px 0 0 0 #d8f2ff,
              340px 0 0 0 #d8f2ff,
              360px 0 0 0 #d8f2ff,
              380px 0 0 0 #d8f2ff,
              400px 0 0 0 #d8f2ff,
              420px 0 0 0 #d8f2ff,
              440px 0 0 0 #d8f2ff,
              460px 0 0 0 #d8f2ff,
              480px 0 0 0 #d8f2ff,
              500px 0 0 0 #d8f2ff,
              520px 0 0 0 #d8f2ff,
              540px 0 0 0 #d8f2ff,
              560px 0 0 0 #d8f2ff,
              580px 0 0 0 #d8f2ff,
              600px 0 0 0 #d8f2ff,
              620px 0 0 0 #d8f2ff,
              640px 0 0 0 #d8f2ff,
              660px 0 0 0 #d8f2ff,
              680px 0 0 0 #d8f2ff,
              700px 0 0 0 #d8f2ff,
              720px 0 0 0 #d8f2ff,
              740px 0 0 0 #d8f2ff,
              760px 0 0 0 #d8f2ff,
              780px 0 0 0 #d8f2ff,
              800px 0 0 0 #d8f2ff,
              820px 0 0 0 #d8f2ff,
              840px 0 0 0 #d8f2ff,
              860px 0 0 0 #d8f2ff,
              880px 0 0 0 #d8f2ff,
              900px 0 0 0 #d8f2ff,
              920px 0 0 0 #d8f2ff,
              940px 0 0 0 #d8f2ff;
  padding-right: 20px;
  color: rgba(54, 188, 255, 1);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

<div>
  <pre>
 
Here is something<span class="one"> hello 
there
      how are you
      are you
      are you
      are you</span>
    
Here is something else with the very very very looooooooooooooooooooooong line of text, some really long line of text, really long
</pre>
</div>

Hovewer，它有另一个缺点：它只能与纯色一起使用，因为阴影的一部分重叠和半透明阴影的重叠看起来很丑陋。

Answer 2

尝试在跨度标签或跨度类中添加此

.one {
background: rgba(54, 188, 255, 0.15);
color: rgba(54, 188, 255, 1);
width: 100%;
display: block;

}

您必须使用显示：块和宽度：100; 在跨度标签中。