禁用小写字符的下划线：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. 设置比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＆＃34;覆盖＆＃34; 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，并减小行高以拉出h1盒子模型的底部。
2. 应用两个非模糊的文本阴影，这些阴影将在文本后面和边框底部呈现。 （在本例中，第一个是向下和向左2px;第二个是向下和向右2px。）

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

---

fyi - 浏览器不能很好地使用文本阴影;保守地使用它！

Answer 5

这将是一个痛苦的屁股，但我会做一个＆＃34;强调＆＃34;上课然后进去并手动完成

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 ：

>>> re.findall(r'(\w+?)\s=\s(.+?)', raw, re.DOTALL)
[('CONTENT', 'A'), ('TABLES', 'T'), ('PARALLEL', '4')]


>>> re.findall(r'^(\w+)\s=\s(.+)?', raw, re.M)
[('CONTENT', 'ALL'), ('TABLES', 'TEST.RAW_1'), ('PARALLEL', '4')]


>>> re.findall(r'(\w+)\s=\s(.+)?', raw, re.DOTALL)
[('CONTENT', 'ALL\nTABLES = TEST.RAW_1\n        , TEST.RAW_2\n        , TEST.RAW_3\n        , TEST.RAW_4\nPARALLEL = 4\n')]

Answer 7

查看text-decoration-skip-ink CSS属性。这可以指定当上划线和下划线越过字形的上升和下降位置时如何绘制。

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

<h1>George quietely jumped!</h1>