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

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 padding 那么行高将是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 为您提供了一个解决方案，可能对您有用，也可能不适合您，因为行高贯穿整个段落，使所有行都变宽。如果那确实是你想要的，那么你就有了答案。

不过，从用户体验的角度来看，在我看来您需要退后几步。您真的想以中断阅读流程的方式将突出显示的文本分开吗？这就是你要做的，如果你给它添加额外的填充。您不喜欢将其作为段落分开的想法表明您不希望向其中添加填充，因为毕竟这就是段落分开的方式。

如果您想将句子与段落的其余部分放在一起并对其进行填充，您可能会费心弄清楚具体的操作方法，但您会注意到一行具有突出显示和普通文本的组合将填充整行。因此，您将拥有一些普通文本，这些文本将比其他普通文本设置得更远，如 Observer 示例中所示。这会以分散注意力的方式吸引 reader 对文本的注意力。

如果你想让它比仅仅突出显示它更突出，你可以在它周围放一个边框，就像我的例子一样。但我认为这看起来也有点不对劲，因为边界在换行时被打破了。您也可以考虑在顶部和底部设置边框。

不过，最后，我会坚持别人做的，只是改变颜色。那是 reader 们习惯的，如果你改变它，他们将不得不花一点时间来弄清楚你在做什么。

.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>

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

How to highlight long sentences with padding in a paragraph?

html

css

display