禁用小写字符的下划线:gqpjy？

Question

有时你不希望下划线盲目地切入带下划线的页面标题!
有没有办法自动优雅地禁用某些小写字符的下划线？ 在这些情况下,更好的是不要强调这些小写字母{g,q,p,j, y}

CSS: h1{ text-decoration: underline; }
PAGE TITLE: George quietely jumped!

A)有没有办法可以达到如此精致和先进的造型规则？
B)我们想要强调哪些其他拉丁字符？
C)如何设置下划线的厚度/薄度？

Answer 1

你也可以用边框底部伪造下划线.这可以适用于单行,如果显示属性允许元素缩小内容.(只是避免阻止).

这里有一个display:table允许中心文本和前后断行的例子:http://codepen.io/gc-nomade/pen/vJoKB/ 这是什么意思？

1. 设置比font-size更小的行高,导致文本从其容器溢出.
2. 绘制底部边框以下划线文本
3. SVG提供stroke,在CSS中,我们可以做类似的增加text-shadow与背景颜色相同的东西.
4. DEMO,你甚至可以为simili下划线设置不同的颜色并添加一个投影.

在旧的浏览器,你就失去了box-shadow选择,但你仍然可以使用double,groove或ridge border用不同的颜色,文本样式.

感谢@PatNewell分享这个链接:https://medium.com/designing-medium/7c03a9274f9

Answer 2

此解决方案用于jQuery自动将字母包装在<span>标签中的下划线.

DEMO

作为父母与text-decoration:underline"覆盖"孩子text-decoration:none;(见这里).该技术是用a包裹目标字母(下划线的字母)<span class="underline">并应用于text-decoration:underline;该类.

输出:

不会加下划线的标志:

g  j  p  q  y  Q  @  {  _  (  )  [  |  ]  }  ;  ,  §  µ  ç  /

HTML:

<h1 class="title">George quietely jumped!</h1>

CSS:

.underline {
    text-decoration:underline;
}

jQuery:

$('.title').each(function () {
    var s = '<span class="underline">',
        decoded;
    $(this).prop('innerHTML', function (_, html) {
        s += html.replace(/&amp;/g, '&').replace(/(g|j|p|q|y|Q|@|{|_|\(|\)|\[|\||\]|}|;|,|§|µ|ç|\/)/g, '</span>$1<span class="underline">');
        s += '</span>'
        $(this).html(s);
    });
});

Answer 3

文本装饰模块3级介绍 text-decoration-skip

此属性指定元素内容的哪些部分必须跳过影响元素的任何文本修饰.

您可以通过将其设置为ink以下来实现所需的行为:

跳过绘制字形的位置:中断装饰线以使文本的形状显示文本装饰否则将跨越字形的位置.UA必须跳过字形轮廓两侧的一小段距离.

h1 {
  text-decoration: underline;
  text-decoration-skip: ink;
}

<h1>George quietely jumped!</h1>

请注意主流浏览器尚不支持它.

Answer 4

这将是一个痛苦的屁股，但我会做一个“下划线”类，然后进去手动做

超文本标记语言

<h1><span class="underline">Ver</span>g<span class="underline">eten Kanalen</span></h1>

CSS

.underline{text-decoration:underline;}