3
目標是圍繞嵌套在<p>和<div>之間的<span>設置單個連續輪廓。我發現這個解決方案：CSS/Javascript: How to draw minimal border around an inline element?只有在任何元素上沒有行高設置時纔有效。是否可以繪製一個單一的輪廓（如圖），同時保持我的線高度？ 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>你會發現，如果line-height屬性已被註釋掉，如所期望的輪廓表現。這個屬性在下面的代碼片段中被註釋掉了。
.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>