我遇到了文本修饰的问题：使用内联块的两个跨度下划线. [问题是,只有URL的一部分会在悬停时加下划线,另一部分不会.我需要保留display属性,否则不会应用text-overflow(参见：Text-overflow: ellipsis alignment issue)
HTML：
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/
最佳答案
如何使用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;
}
