结构设置必须

Question

我试图将span元素背景强制为父级的全宽。

抬头
是的......我完全知道做divs ...

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

由于其文字流畅性，必须与跨度或跨度类似。
必须位于pre标记中。

结构设置必须

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

我拥有什么

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

我想要实现的目标

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

Answer 1

尝试在span标记或span类

中添加此项

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

}

您必须在span标记中使用 display：block and width：100; 。

Answer 2

我能想出的第一个解决方案如下：

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，它有另一个缺点：它只能用纯色，因为部分阴影重叠并且半透明阴影的重叠看起来很难看。

如何将span的背景颜色强制为100％宽度？

结构设置必须

我拥有什么

我想要实现的目标

2 个答案: