【问题标题】：Text-decoration: underline not applying with inline-block span elements文本装饰：下划线不适用于内联块跨度元素
【发布时间】：2013-05-25 12:18:00
【问题描述】：

我在使用inline-block 的两个跨度上遇到了text-decoration: underline 的问题。 [问题只是悬停时URL的一部分会加下划线，其他部分不会。我需要保留 display 属性，否则text-overflow 不会被应用（参见：Text-overflow: ellipsis alignment issue）

HTML：

<div class="details" itemscope itemtype="http://data-vocabulary.org/Product"> 
   <h2>
       <a class="heading" href="/product/acmesw" title="Acme Super Widget">
           <span class="trunc" itemprop="name">Acme Super Widget 3000</span>
           <span itemprop="offerDetails" itemscope itemtype="http://data-vocabulary.org/Offer">- <meta itemprop="currency" content="AUD" /><spanitemprop="price">$199.95</span></span>     
        </a>
    </h2>
</div>

CSS：

.details {
    width:300px;
    border:1px solid red;
}
.trunc {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width:60%;
}

h2 span {
    display:inline-block;
    vertical-align:top;
}

a:hover{
    text-decoration:underline;
    color:red;
}

jsFiddle：http://jsfiddle.net/c7p8w/2/

【问题讨论】：

问题的核心是您的.trunc 没有继承 text-decoration: underline 来自其父<a>。您可以简单地添加.trunc { ..; text-decoration: inherit; .. }。我不知道你是否会对结果感到满意，因为省略号仍然没有下划线......我不知道如何实现。
Re：省略号下划线问题 - 一直是 asked before，看来唯一的解决方案是使用 border-bottom 而不是 text-decoration: underline。对不起。

标签： html css text-decorations

【解决方案1】：

通过CSS specs，下划线不会影响已设置text-decoration: underline 的元素内的内联块。

您可以通过为它们显式设置下划线来为它们添加下划线，例如，将最后一个 CSS 规则中的选择器 a:hover 替换为选择器列表 a:hover, a:hover *。

不过，这不会影响省略号。它不是任何元素内容的一部分，而是由浏览器插入的，所以我认为你不能在它下面加下划线。

【讨论】：

【解决方案2】：

用border-bottom给文字加下划线怎么样？

a {
     text-decoration:none;
    border-bottom: 1px solid blue; /*Remove this if you want it only on hover*/
}
a:hover {
    text-decoration:none;
    border-bottom: 1px solid red;
    color:red;
}

Fiddle

【讨论】：

你知道有什么技巧可以减少文本和边框下方的间隙以匹配 text-decoration 的作用，因为你不能有负填充？

【解决方案3】：

虽然有点奇怪...

添加这些css？

CSS

.details h2{
    border-bottom:1px solid #fff; /*use the same color as your .details background color*/
}
.details h2:hover {
    border-bottom:1px solid #f00;
}

在 jsfiddel 上查看 DEMO...http://jsfiddle.net/c7p8w/14/

【讨论】：

谢谢，但你得到了跨度之间的空间，我希望这条线全长。