css - 设置行高且行间出现间距时扩展包裹跨度的背景颜色

Question

我有一段环绕的文本，并应用了一些背景颜色（作为突出显示）。用户可以动态调整文本的行高，但是当这个值足够高时，文本行之间会出现白色间隙。我想填充/扩展线条，使背景颜色完全填充间隙，就好像 line-height 是 1。

到目前为止，我发现的最接近的帖子是 2012 年的回答：如何将 CSS 背景颜色应用于段落中的某些文本而没有由行高引起的空格？

答案是根据行高调整填充。由于我的示例中的 line-height 是动态的，因此这可能并不容易。

我还想保持文本的格式（例如不想设置 display: inline-block）。

在这一点上，我唯一能想到的就是根据提供的 line-height 以某种方式即时计算填充。我希望那里有一个更优雅的解决方案。

这是我遇到的一个例子：https ://codepen.io/anon/pen/Jmeerw

<div class="wrapper">
  <span class="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor <span class="highlight">incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute</span> irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </span>
  <div class="input-area">
    <div>Enter line-height in percent</div>
    <input id="line-height-input" type="number" value=200>%
  <div>
</div>

.wrapper {
  width:600px; 
  margin: auto;
  left: 0;
  right: 0;
}

.input-area {
  padding-top: 20px;
}

.text {
  font-size:25px;
  line-height: 200%;
}

.highlight {
  background-color: lightgreen;
}

$('#line-height-input').change(function(e) {
  $('.text').css('line-height', e.target.value + '%')
})

标签： css

Answer 1

在跨度上设置填充highlight以增加其背景区域。

$('#line-height-input').change(function(e) {
  $('.text').css('line-height', e.target.value + '%');
  // new:
  var padding = ((e.target.value-100)/200); if (padding<0) padding = 0;
  $('.highlight').css('padding-top', padding + 'em');
  $('.highlight').css('padding-bottom', padding + 'em');
})

.wrapper {
  width:600px; 
  margin: auto;
  left: 0;
  right: 0;
}

.input-area {
  padding-top: 20px;
}

.text {
  font-size:25px;
  line-height: 200%;
}

.highlight {
  background-color: lightgreen;
  padding:.5em 0; /* initial, for a 2em lineheight */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="wrapper">
  <span class="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor <span class="highlight">incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute</span> irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </span>
  <div class="input-area">
    <div>Enter line-height in percent</div>
    <input id="line-height-input" type="number" value=200>%
  <div>
</div>