禁用小写字符的下划线：g q p j y?

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. 设置小于字体大小的行高会导致文本从其容器溢出。
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; 的孩子（请参阅here）。该技术是仅用<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 {
    line-height: 0.9em;
    border-bottom: 1px solid black;
    text-shadow: 2px 2px #fff, -2px 2px #fff;
}

想法：

1. 使用border-bottom，并降低line-height以将h1 box模型的底部拉上来。
2. 应用两个不模糊的文本阴影，它们将呈现在文本后面和边框底部上方。 （在这个例子中，第一个是向下和向左 2px；第二个是向下和向右 2px。）

小提琴：http://jsfiddle.net/pmn4/a5LZE/

---

fyi - 浏览器不能很好地处理文本阴影；谨慎使用！

Answer 5

这会很痛苦，但我会创建一个“下划线”类，然后手动进行操作

HTML

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

CSS

.underline{text-decoration:underline;}

Answer 6

这是我的解决方案：

Working Fiddle

CSS：

h1, h2 {
  background-image: linear-gradient(to top, transparent 0px, transparent .15em, red .15em, red calc(.15em + 1px), transparent calc(.15em + 1px), transparent 100%);
  text-shadow: 0px -2px 3px white, 0px -2px 3px white, 0px -2px 3px white, 0px -2px 3px white, 0px -2px 3px white, 0px -2px 3px white;
}

Answer 7

查看text-decoration-skip-ink CSS 属性。这可以指定上划线和下划线越过字形升序和降序时的绘制方式。

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

<h1>George quietely jumped!</h1>