3
Цель состоит в том, чтобы установить единый непрерывный контур вокруг <span>, вложенный в <p> и <div>. Я нашел это решение: 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>Вы заметите, что если свойство высота линии закомментирована, контур ведет себя как хотелось бы. Это свойство закомментировано в нижеприведенном фрагменте.
.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>