文本装饰：下划线不适用于内联块跨度元素

问题描述

我在使用 inline-block 的两个跨区上遇到 text-decoration：underline 的问题。 [问题只有一部分的URL将在下划线时悬停，另一部分不会。我需要保持显示属性，否则不会应用 text-overflow （参见：

解决方案

p>如何使用 border-bottom 来强调文本？

  a {
 text-decoration：none; 
 border-bottom：1px solid blue; / *删除这个，如果你想它只有悬停* / 
} 
 a：hover {
 text-decoration：none; 
 border-bottom：1px solid red; 
 color：red; 
} 
  

I'm having an issue with text-decoration: underline on two spans that use inline-block. The [problem is only one part of the URL will underline when hovered, the other does not. I need to keep the display property, otherwise text-overflow won't get applied (see: 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/

解决方案

How about using border-bottom to underline the text?

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

这篇关于文本装饰：下划线不适用于内联块跨度元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！