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

Question

我有一段文本正在换行，并应用了一些背景颜色(作为高亮显示)。用户可以动态调整文本的行高，但是当调整到足够高的值时，文本行之间会出现白色间隙。我想填充/扩展线条，以便背景颜色完全填充间隙，就好像 line-height 是 1 一样。

到目前为止，我找到的最接近的帖子是在 2012 年回答的:How to apply CSS background color to some text in a paragraph without spaces caused by line-height?

答案是根据行高调整内边距。由于我的示例中的行高是动态的，所以这可能不是那么容易。

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

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

这是我遇到的一个例子: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 + '%')
})

Answer 1

在 highlight 范围内设置 padding 以增加其背景区域。

$('#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>