css - 嵌套带下划线的文本元素

Question

我在文本段落中有相当大一部分带下划线的文本。他们中的许多人跨越了几行。

在那些带下划线的元素中，在某些情况下，我有自己应该加下划线的元素。在这里，外部带下划线元素的下划线应该稍微向下，以使内部下划线元素的下划线可见。看看我的模型的第三行，你就会明白我的意思(至少我希望如此)。 “querit”和“Epicurae”在带下划线的元素中带有下划线。

如何在 CSS 中实现这一点？使用 text-decoration: underline 下划线会折叠，您将看不到哪些元素是嵌套的带下划线的元素。另一方面，display:inline-block; border-bottom:1px solid black; 只会在最后一行下划线。

编辑:这个模型的 HTML 看起来像这样:(我猜不是特别有趣)

<p> de con firt omniandabetisporatienimusi remprobist extrum etis e ipsaenderienimagnos <span class="underlined">quibus quidas mus, ines, quam Solostracum met ipsa horum mum, esispotatus con ipid  inprobus, que vollin que <span class="underlined">querit</span> pus nego mo <span class="underlined">Epicurae</span> id sitam mod etia et nectuas ent malosse te. quitus, essendolinxet ob utrus aleganesserisimone ne nitae lium vitae;  Metisquiamquae sid los plego ilius, andus adexperibus vitur. quod dictantum alt, num Toriae</span> conc ocorturaec </p>

Answer 1

只是不要使用 display: inline-block .比如说，我们正在使用标签 <span class="und">用于强调某事。对于嵌套的，使用这样的东西:

/* Start Praveen's Reset for Fiddle ;) */
* {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
body {margin: 15px;}
/* End Praveen's Reset for Fiddle ;) */
p {margin: 0 0 10px;}
.und {border-bottom: 1px solid; padding: 2px;}
.und .und {border-bottom: 1px solid; padding: 0;}

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, cumque! Facere iste, adipisci non quam molestias modi! Reprehenderit, quo officia est voluptatibus eum omnis magni voluptate. Similique, voluptatibus quasi dolore!</p>

<p><span class="und">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque quo ea natus deserunt praesentium laudantium similique, officia sequi unde provident quasi aliquid iure, tempora sunt quod doloremque, dolor. Voluptate, tempora! <span class="und">This is double underlined and doesn't break!</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor commodi adipisci similique eligendi a praesentium officia repudiandae quaerat ipsum placeat natus nemo, sit magnam laborum error vero, ullam officiis veniam!</span></p>

嵌套项

/* Start Praveen's Reset for Fiddle ;) */
* {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
body {margin: 15px;}
/* End Praveen's Reset for Fiddle ;) */
p {margin: 0 0 10px; line-height: 1.5;}
.und {border-bottom: 1px solid; padding: 4px;}
.und .und {border-bottom: 1px solid; padding: 2px;}
.und .und .und {border-bottom: 1px solid; padding: 0;}

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, cumque! Facere iste, adipisci non quam molestias modi! Reprehenderit, quo officia est voluptatibus eum omnis magni voluptate. Similique, voluptatibus quasi dolore!</p>

<p><span class="und">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque quo ea natus deserunt praesentium laudantium similique, officia sequi unde provident quasi aliquid iure, tempora sunt quod doloremque, dolor. Voluptate, tempora! <span class="und">This is double underlined and <span class="und">triple consectetur adipisicing</span> doesn't break!</span> Lorem ipsum dolor sit amet, elit. Dolor commodi adipisci similique eligendi a praesentium officia repudiandae quaerat ipsum placeat natus nemo, sit magnam laborum error vero, ullam officiis veniam!</span></p>