Question

我有一段自动换行的文本，并应用了一些背景色（突出显示）。用户可以动态调整文本的行高，但是将其设置为足够高的值时，文本行之间会出现空白。我想填充/扩展线条，以使背景色完全填充空白，好像行高为1。

到目前为止，我找到的最接近的帖子是2012年回答的一个帖子：How to apply CSS background color to some text in a paragraph without spaces caused by 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 + '%')
})

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>

Answer 2

另一种解决方法是使用全局css变量和'calc（）'css函数：

// Doesn't matter if the 'font-size' or the 'line-height' changes, 
// the 'padding' will adjust accordingly.
$('#line-height-input').change(function(e) {
  $(':root').css('--line-height', (e.target.value/100.0) + 'em');
})
$('#font-size-input').change(function(e) {
  $(':root').css('--font-size', e.target.value + 'px');
})

:root {
  --line-height: 1.5em;
  --font-size: 18px;
  /* The padding will adjusted automatically, allowing for more modulability */
  --font-padding: calc((var(--line-height) - var(--font-size))/2) 0;
}
.text {
  font-size:var(--font-size);
  line-height: var(--line-height);
}
.highlight { 
  background-color: lightgreen;
  padding: var(--font-padding);
}
/* Not important */
.wrapper { width:500px; display: inline-block;}
.input-area { padding: 0 10px 0 0; margin: 0 10px; border-right: 1px solid black; height:100%; display: inline-block; vertical-align:top; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-area">
  <div>Line Height </div>
  <input id="line-height-input" style="width:50px;" type="number" step=5 value=150> %
  <div>Font Size </div>
  <input id="font-size-input" style="width:50px" type="number" value=18> px
</div>
<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. 
  </span>
</div>

设置行高并在行之间出现间距时，扩展包裹的跨度的背景色

2 个答案: