时间戳

首页 > 解决方案 > 如何在段落中突出显示带有填充的长句子？

html - 如何在段落中突出显示带有填充的长句子？

问题描述

我想突出显示某些文本中的句子。正常的方法是将句子包装在一个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 小提琴

标签： htmlcssdisplay

解决方案

使用line-height财产。做一点数学，如果你的字体大小是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>

推荐阅读