如何使包装文本的背景跨度精确跨越该文本的像素距离？

Question

这是一个问题，我认为这是足够简单的现代CSS解决，我现在真的很困惑。我想让文本父母的背景正好跨越它最长的文本行的左、右之间的距离，并在两边均匀分布(不像span元素那样)

很明显，块元素自动的宽度为100%，如果不是文本自动包装机制的行为，内联块就可以了，这是在第一次将边框100%的大小包装到下面的行时。

我模拟了一个期望的效果，但这个解决方案有点丑陋。我对更简单的本土解决方案感兴趣。

小提琴+模拟：https://jsfiddle.net/sxmkonLp/20/

法线块元素文本

<div class="container normal">
  <h1 class="fill">Gonna wrap my text around</h1>
</div>

父元素显示：“内联块”(稍微靠近一点)

<div class="container">
  <h1 class="fill inl-blk">Gonna wrap my text around</h1>
</div>

"span“元素中的文本(更接近我需要的内容，但不均匀地分布在两边，取决于每一行的长度)

<div class="container">
  <h1>
    <span>Gonna wrap my text around</span>
  </h1>
</div>

想要的结果(用br和类模拟文本中断)

<div class="container text-span">
  <h1 class="fill2 inl-blk">Gonna<br class="sm4"> wrap<br class="sm3"> my<br class="sm2 sm4"> text<br class="sm1 sm3 sm4"> around</h1>
</div> 

标记中有CSS。

html, body {
  text-align: center;
  margin: 0;
  padding: 0;
}

.container {
  padding: 10px;
  width: auto;
  background: orange;
  margin: 10px;
}

.container span {
  background: lightgreen;
  padding: 5px;
}

.inl-blk {
  display: inline-block;
}

.fill {
  background: yellow;
}
.fill2 {
  background: blueviolet;
  color: white;
}

.sm1,.sm2,.sm3,.sm4 {display: none;}

@media screen and (max-width: 470px) {
  .sm2 {display: none;}
  .sm3 {display: none;}
  .sm4 {display: none;}
  .sm1 {display: block;}
}
@media screen and (max-width: 350px) {
  .sm1 {display: none;}
  .sm3 {display: none;}
  .sm4 {display: none;}
  .sm2 {display: block;}
}
@media screen and (max-width: 295px) {
  .sm1 {display: none;}
  .sm2 {display: none;}
  .sm4 {display: none;}
  .sm3 {display: block;}
}
@media screen and (max-width: 242px) {
  .sm1 {display: none;}
  .sm2 {display: none;}
  .sm3 {display: none;}
  .sm4 {display: block;}
}

正如您在最后一个示例(紫色框)中所看到的，背景正好占据文本边界的空间。问题是，当文本自动包装到下面的行时，就会发生这种情况。

我最近有了一些发现，比如这个“奇异的”CSS属性--装饰中断:克隆；它使span的内容更像是单独的、块行，但仍然跨越不同的行长，使它无法满足我当前的需要。如果我们有一些CSS属性，这将是很酷的。

Answer 1

我已经为这个问题开发了相当简单的JS解决方案。最后，几乎每个站点都有大量的javascript，所以我觉得它是可以忍受的。我们所需要的是“css-元素查询”这个令人惊叹的软件包中的"ResizeSensor“。

因此，我们得到一个简单的容器，它保存在我们的标题中使用h1和div的类" title -bg"，它将是我们的“虚拟响应背景”的标题。它从h1获得精确的文本宽度，显示设置为内联。

<div class="container">
  <div class="title">
    <h1>Should I learn Scratch before programming?</h1>
    <div class="title-bg"></div>
  </div>
</div>

下面是CSS，注意“..title bg”是绝对定位的，所以它需要转换-50%的解决方案才能保持中心位置。同时，z-index: 1的h1需要是可见的。

.container {
  max-width: 800px;
  min-height: 320px;
  padding: 20px;
  background: #ccc;
  margin: auto;
  text-align: center;
}

.title {
  overflow: hidden;
}

.title h1 {
  display: inline;
  /* background: orange; */
  position: relative;
  z-index: 1;
}

.title-bg {
  background: teal;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

对于JS，我们所需要的只是设置ResizeSensor来侦听事件。由于某些原因，我无法让它直接使用h1元素(当设置为display: inline时)，所以我将它附加到标题div中。其余的是从h1.offsetWidth中获取值，这恰好是文本长度的值。哇，准备好了，开始工作！

let title = document.querySelector('.title')
let h1 = document.querySelector('.title h1')
let titleBg = document.querySelector('.title-bg')

// fire once on start
titleBg.style.width = `${h1.offsetWidth}px`
titleBg.style.height = `${h1.offsetHeight}px`

// init so it auto fires on element resize
new ResizeSensor(title, ()=> {
    titleBg.style.width = `${h1.offsetWidth}px`
  titleBg.style.height = `${h1.offsetHeight}px`
})

自己试试：http://jsfiddle.net/ktdfqhzo/52/