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/
By CSS specs, the underline does not affect inline blocks inside the element for which text-decoration: underline
has been set.
You can make them underlined by explicitly setting that for them, for example by replacing the selector a:hover
in your last CSS rule by the selector list a:hover, a:hover *
.
This will not affect the ellipsis symbol, though. It is not part of any element content but inserted by a browser, so I don’t think you can underline it.