如何用段落中的填充突出显示长句子？

Question

我想突出显示某些文本中的句子。通常的方法是将句子包装在span元素中并设置背景颜色：

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

并且：

.highlight{
  background-color: yellow;
}

如果我现在想在此突出显示中使用一些填充和其他样式，则我有问题：

.highlight{
  background-color: yellow;
  padding: 5px;
  border-radius: 5px
}

带有小亮点的地方，display: inline-block;可以充分解决此问题。但是，现在我的问题是，我的句子是一个段落，将文本分为三段：

.highlight{
  background-color: yellow;
  padding: 5px;
  border-radius: 5px;
  display: inline-block;
}

有没有一种使用inline-block的方法而没有所有麻烦？

工作JS fiddle

Answer 1

使用line-height属性。做一点数学，如果您的 font-size 为 16px ，并且您要添加 5px填充，然后 line-height 将为 26px

p{
  width: 300px;
}

.highlight{
  background-color: yellow;
  padding: 5px;
  border-radius: 5px;
  line-height: 26px;
}

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

Answer 2

在我看来，您并不完全清楚自己想要什么。 Observer为您提供了一个可能对您有效的解决方案，因为行高在整个段落中都保持不变，因此所有行都变宽了。如果确实是您想要的，那么您就有答案了。

但是，从UX的角度来看，您似乎需要退后几步。您是否真的要以突出显示的文本来打断阅读流程的方式将它们分开？如果您向其中添加额外的填充，那将是您将要做的。您不希望将其作为段落分开的想法表明您不希望在其中添加填充，因为毕竟这是将段落分开的方式。

如果您想将该句子与该段落的其余部分保持一致并加以填充，则可能会麻烦找出确切的用法，但是您会注意到一行包含一个高亮和普通文本的组合将填充整行。因此，就像Observer的示例一样，您将拥有一些普通文本，它们之间的距离比其他普通文本要远。这样会分散读者的注意力，引起读者的注意。

如果您希望它比仅突出显示更多，则可以在其周围放置边框，如我的示例所示。但是我认为这看起来也有点不对劲，因为边框在换行时被打破了。您可能会考虑在顶部和底部都设置边框。

不过，最后，我会坚持其他所有人所做的，只是改变颜色。这就是读者的习惯，如果您进行更改，他们将需要一些时间来弄清楚您的工作。

.highlight{
  background-color: yellow;
  border: 1px solid green;
  padding: 0 5px;
}

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