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

Question

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

在这些带下划线的元素中，在某些情况下，我有自己应该加下划线的元素。这里，外部带下划线的元素的下划线应该稍微向下，以使内部下划线元素的下划线可见。看看我的模型的第三行，你会理解我的意思（至少我希望如此）。 ＆＃34; querit＆＃34;和＆＃34; Epicurae＆＃34;在下划线的元素中加下划线。

如何在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">来标记内容。对于嵌套的，请使用以下内容：

＆＃13;

＆＃13;

/* 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;}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

嵌套商品

＆＃13;

＆＃13;

/* 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;}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;