css 如何设置括号的样式,使它们不会悬挂在旁边的其他字符之下

1cosmwyk  于 2023-03-20  发布在  其他
关注(0)|答案(1)|浏览(119)

如果我有这个文本下面的括号,有没有一种方法来样式他们,使括号不挂在下面的其他字符?

<span> Some text <span style = "font-size: .7em;">(other text)</span></span>
agxfikkp

agxfikkp1#

悬挂在行下方的括号是字体的决定。说实话,如果你想要这样,你最好手动编辑你使用的字体,使两个字形从基线开始。然而,这会使它们在带有降序的字母(如“q”或“y”)旁边看起来很傻。
不明白“基线”和“下行线”的意思吗?这里有一个方便的参考:

假设你不打算编辑字体,因为这是相当极端的!所以你真正要问的是:“我如何在句子中定位单个字符?”答案要么是相对定位,要么是我更喜欢的translateY()
请注意,这将使括号的 top 滑稽地上升到基线之上,并且我在这里使用的偏移量将是一个不同的值,具体取决于所选择的字体(这里是Times New Roman)。

.raise-baseline {
  display: inline-block;
  /* `em` so that positioning is accurate for other font sizes */
  /* note that the exact amount depends on the font - this will only be accurate for Times New Roman */
  transform: translateY(-.12em);
}

/* demo styles */
body {
  font-size: 30px;
}
<p>This is a line (with a regular parenthesis).</p>

<p>And here's one <span class="raise-baseline">(</span>with an adjustment<span class="raise-baseline">)</span>.</p>

相关问题