6

我text-decoration: underline在两个使用inline-block. [问题只是悬停时URL的一部分会下划线，其他部分不会。我需要保留显示属性，否则text-overflow不会被应用（请参阅：文本溢出：省略号对齐问题）

在此处输入图像描述

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/

4

3 回答 3

11

根据CSS 规范，下划线不会影响text-decoration: underline已设置的元素内的内联块。

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

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

于 2013-05-30T09:05:02.560 回答
3

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

小提琴

于 2013-05-30T03:41:20.740 回答
1

虽然有点奇怪……

添加这些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/

于 2013-05-30T03:44:59.257 回答