html - 带有行高的内联跨度周围的单个连续轮廓

Question

目标是围绕 <span> 设置一个连续的轮廓嵌套在 <p> 中和 <div> .我找到了这个解决方案:CSS/Javascript: How to draw minimal border around an inline element?只有在任何元素上都没有设置 line-height 时才有效。是否可以在保持行高的同时绘制单个轮廓(如图)？ mockup of desired result

这是我的代码:

.note_text_theme {
  outline: 2px solid blue;
  outline-style: dashed;
}
.note_text_theme span {
  border: 1px solid white;
  background-color: white;
  position: relative;
  z-index: 1000;
}
p {
  margin: 10px;
}
.text_paragraph {
  font-size: 18px;
  line-height: 170%;
}

<div class="text_paragraph">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id lobortis purus. Nunc nibh metus, dictum sit amet mi sed, sagittis fermentum mauris. Mauris tincidunt lectus quam, quis tincidunt mi finibus at. <span class="note_text_theme">Cras feugiat accumsan magna, vel malesuada sem pulvinar nec. Curabitur a sem quis metus sodales rhoncus. Phasellus tempus ante magna, a gravida est pellentesque sed. Nam volutpat tortor nec lobortis aliquam. Fusce ornare pharetra tristique. Cras fringilla, nunc ac lobortis posuere, libero est</span>
    <span></span>blandit justo, ut placerat nisl erat viverra odio. Praesent finibus viverra neque, quis feugiat felis porttitor a. Vestibulum ante ipsum primis in faucibus orci luctus.
  </p>
</div>

您会注意到，如果行高属性被注释掉，轮廓将按预期运行。此属性在下面的代码片段中被注释掉了。

.note_text_theme {
  outline: 2px solid blue;
  outline-style: dashed;
}
.note_text_theme span {
  border: 1px solid white;
  background-color: white;
  position: relative;
  z-index: 1000;
}
p {
  margin: 10px;
}
.text_paragraph {
  font-size: 18px;
  //line-height: 170%;
}

<div class="text_paragraph">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id lobortis purus. Nunc nibh metus, dictum sit amet mi sed, sagittis fermentum mauris. Mauris tincidunt lectus quam, quis tincidunt mi finibus at. <span class="note_text_theme">Cras feugiat accumsan magna, vel malesuada sem pulvinar nec. Curabitur a sem quis metus sodales rhoncus. Phasellus tempus ante magna, a gravida est pellentesque sed. Nam volutpat tortor nec lobortis aliquam. Fusce ornare pharetra tristique. Cras fringilla, nunc ac lobortis posuere, libero est</span>
    <span></span>blandit justo, ut placerat nisl erat viverra odio. Praesent finibus viverra neque, quis feugiat felis porttitor a. Vestibulum ante ipsum primis in faucibus orci luctus.
  </p>
</div>

Answer 1

在 note_text_theme 中添加内边距以适应增加的行高

.note_text_theme {
  outline: 2px solid blue;
  outline-style: dashed;
padding: 5px 0px;
}
.note_text_theme span {
  border: 1px solid white;
  background-color: white;
  position: relative;
  z-index: 1000;
}
p {
  margin: 10px;
}
.text_paragraph {
  font-size: 18px;
  line-height: 170%;
}

<div class="text_paragraph">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id lobortis purus. Nunc nibh metus, dictum sit amet mi sed, sagittis fermentum mauris. Mauris tincidunt lectus quam, quis tincidunt mi finibus at. <span class="note_text_theme">Cras feugiat accumsan magna, vel malesuada sem pulvinar nec. Curabitur a sem quis metus sodales rhoncus. Phasellus tempus ante magna, a gravida est pellentesque sed. Nam volutpat tortor nec lobortis aliquam. Fusce ornare pharetra tristique. Cras fringilla, nunc ac lobortis posuere, libero est</span>
    <span></span>blandit justo, ut placerat nisl erat viverra odio. Praesent finibus viverra neque, quis feugiat felis porttitor a. Vestibulum ante ipsum primis in faucibus orci luctus.
  </p>
</div>