html– 文本修饰:下划线不适用于内联块span元素

html– 文本修饰:下划线不适用于内联块span元素,第1张

概述我遇到了文本修饰的问题:使用内联块的两个跨度下划线. [问题是,只有URL的一部分会在悬停时加下划线,另一部分不会.我需要保留display属性,否则不会应用text-overflow(参见:Text-overflow: ellipsis alignment issue)HTML:<div class='details' itemscope itemt

我遇到了文本修饰的问题:使用内联块的两个跨度下划线. [问题是,只有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;}

Fiddle 总结

以上是内存溢出为你收集整理的html – 文本修饰:下划线不适用于内联块span元素全部内容,希望文章能够帮你解决html – 文本修饰:下划线不适用于内联块span元素所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/web/1124429.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-30
下一篇 2022-05-30

发表评论

登录后才能评论

评论列表(0条)