为小写字符禁用下划线：g q p j y？ [英] Disable underline for lowercase characters: g q p j y?

问题描述

有时您不希望有下划线盲目切入带下划线的页面标题！

有没有办法自动优雅地禁用下划线某些小写字符？
在这些情况下，不要在下面加上 {g，q，p，j，y}这些小写字母。

>

CSS：
h1 {text-decoration：underline; }

PAGE TITLE：
乔治安静地跳了起来！

A ）有没有任何方法可以达到这样精致和高级的样式规则？ >
B ）我们想要减去其他哪些拉丁字符？

C ）如何设置厚度/下划线

解决方案

您可以使用边框底部伪造下划线。这可以适用于单行，如果显示属性允许元素缩减内容。

这里有一个使用 display：table 的示例，允许中心文本和断行和之后：

Sometimes you don't want an underline blindly cutting through an underlined page title!
Is there a way to automatically elegantly disable underline for certain lowercasee characters? In these cases it's nicer not to underline these lowercase letters like {g,q,p,j, y}

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

A) Is there any way one could achieve such a delicate and advanced styling rule?
B) What other Latin characters do we want to un-underline?
C) How to set the thickness/thinness of the underline?

解决方案

you can as well fake underline with a border-bottom. this can work for single lines and if display properties allows element to shrink on content. (just avoid block ).

here an example with a display:table to allow center text and break line before and after : http://codepen.io/gc-nomade/pen/vJoKB/ What's the idea ?

1. setting a smaller line-height than font-size, cause the text to overflow from its container.
2. draw a bottom border to underline text
3. SVG offers stroke , in CSS , we can do something similar increasing text-shadow with same color as background.
4. DEMO , you can even set a different color to the simili underline and add a dropping shadow.

   ---

In older browser you will lose the box-shadow option, but you still can use the double, groove or ridge border styles with different color than text.

---

Thanks @PatNewell for sharing this very link : https://medium.com/designing-medium/7c03a9274f9

这篇关于为小写字符禁用下划线：g q p j y？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！