Question

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

这是我的代码：

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

您会注意到，如果注释掉line-height属性，则轮廓将按预期运行。此属性已在下面的代码段中注释掉。

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

Answer 1

在note_text_theme中添加填充以调整增加的行高

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

带有线高的内联跨度的单个连续轮廓

1 个答案: