应用字母间距时CSS文本下划线太长？

Posted 2023-02-23

【中文标题】应用字母间距时CSS文本下划线太长？

【英文标题】：CSS Text underlining too long when letter-spacing is applied?

【发布时间】：2011-04-30 05:44:09

【问题描述】：

每当letter-spacing 应用于带有下划线或底部边框的东西时，下划线似乎超出了右侧的文本。有什么办法可以防止下划线超出文本中的最后一个字母？

例如：

<span style="letter-spacing: 1em; border-bottom: 1px solid black;">Test</span>

也许可以使用固定宽度 <div> 和边框，但这确实不是围绕每个带下划线的元素的选项。

谢谢！

【问题讨论】：

有趣的问题，+1。但是你应该使用span 作为你的例子，否则人们会被div 占据100% 宽度的事实误导

谢谢你，是的，span 确实更有意义！

【参考方案1】：

这并不完美，但到目前为止我想出的最佳解决方案是使用 :after 伪元素对其进行屏蔽。这样就不需要在整个文本中添加额外的元素。

例如：

h1 
  /* A nice big spacing so you can see the effect */
  letter-spacing: 1em;
  /* we need relative positioning here so our pseudo element stays within h1's box */
  position: relative;
  /* centring text throws up another issue, which we'll address in a moment */
  text-align: center;
  /* the underline */
  text-decoration: underline;


h1:after 
  /* absolute positioning keeps it within h1's relative positioned box, takes it out of the document flow and forces a block-style display */
  position: absolute;
  /* the same width as our letter-spacing property on the h1 element */
  width: 1em;
  /* we need to make sure our 'mask' is tall enough to hide the underline. For my own purpose 200% was enough, but you can play and see what suits you */
  height: 200%;
  /* set the background colour to the same as whatever the background colour is behind your element. I've used a red box here so you can see it on your page before you change the colour ;) */
  background-color: #990000;
  /* give the browser some text to render (if you're familiar with clearing floats like this, you should understand why this is important) */
  content: ".";
  /* hide the dynamic text you've just added off the screen somewhere */
  text-indent: -9999em;
  /* this is the magic part - pull the mask off the left and hide the underline beneath */
  margin-left: -1em;


<h1>My letter-spaced, underlined element!</h1>

就是这样！

如果您想更好地控制颜色、位置等，您也可以使用边框，但除非您有固定宽度，否则这些都需要您添加 span 元素。

例如，我目前正在开发一个网站，该网站要求 h3 元素具有 2 像素的字母间距、居中的文本和下划线，并在文本和下划线之间添加空间。我的css如下：

h3.location 
  letter-spacing: 2px;
  position: relative;
  text-align: center;
  font-variant: small-caps;
  font-weight: normal;
  margin-top: 50px;


h3.location span 
  padding-bottom: 2px;
  border-bottom: 1px #000000 solid;


h3.location:after 
  position: absolute;
  width: 2px;
  height: 200%;
  background-color: #f2f2f2;
  content: ".";
  text-indent: -9999em;
  margin-left: -2px;

我的 html 是：

<h3><span>Heading</span></h3>

注意事项：

这不是 100% 漂亮的 CSS，但它至少意味着您不必修改和修改 HTML 即可获得相同的结果。

我还没有在带有背景图像的元素上尝试这个，所以还没有想到实现这个的方法。

居中文本使浏览器将文本显示在错误的位置（它占文本 + 之后的额外间距），因此所有内容都向左拉。直接在 h1 元素（不是 :after 伪元素）上添加文本缩进 0.5em（我们在顶部示例中使用的 1em 字母间距的一半）应该解决这个问题，尽管我没有测试这还没有。

非常感谢收到任何反馈！

尼尔

【讨论】：

谢谢@nealio82！我不敢相信已经快 10 年了，我们仍然必须执行这样的伪元素体操才能获得有效的自定义下划线！

【参考方案2】：

问题是“字母间距”通过在每个字母后添加空格来增加空格，但这个空格属于该字母，因此最后一个有一个额外的下划线，使它看起来像是超出了最后一个字母（如果你用鼠标选择 div 的最后一个字母，你会明白我的意思）。

您可以通过使文本块的最后一个字母没有“字母间距”属性来解决它。例如：

<span style="letter-spacing: 1em; text-decoration: underline;">SPACEEE</span>
<span style="text-decoration: underline;">.</span>

这远非理想，但除非它只是一个单行文本（在那里，您可以使用右侧的负边距），否则我想不出任何其他解决方案。

【参考方案3】：

您还可以使用绝对定位的伪元素来实现下划线，并通过使用 left 和 right 属性指定其偏移量来抵消偏移量。单击下面的示例。

<span style="letter-spacing: 5px; position: relative">My underlined text</span>

span:after 
    content: '';
    border-bottom:1px solid #000;
    display: block;
    position: absolute;
    right: 5px;
    left: 0;

https://codepen.io/orangehaze/pen/opdMoO

【讨论】：

优秀的解决方案！我已经投入使用了，效果很好！

【参考方案4】：

据我所知，您对此无能为力。我猜大多数浏览器会在每个字母之后添加字母间距，包括最后一个。没有任何 CSS 属性可以更好地控制字母间距。

这似乎解决了我 Mac 上的 Firefox 3.6 中的问题，但也不是对每个带下划线的元素都这样做。

<span style="border-bottom: 1px solid black;">
    <span style="letter-spacing: 1em;">Tes</span>t
</span>

【参考方案5】：

感谢您的回复，我想这是 css/html 的限制。幸运的是，这些链接是通过 php 放入的，所以我编写了一个脚本来适当地包围它们，虽然不是一个完全理想的解决方案，但它可以工作：

$part1 = substr($string, 0, -1);
$part2 = substr($string, -1);
$full = "<span style='letter-spacing: 1em'>".$part1."</span><span>".$part2."</span>";

（我包含的最后一个字母的第二个跨度，因此当我需要将整个元素包装在链接或其他带有下划线等的东西中时，我可以应用没有字母间距的样式）

太糟糕了，对下划线的控制在 html/css 中相当有限（尤其是试图定义线条与文本之间的距离、粗细等），但我想这暂时可行。

【参考方案6】：

如果你不想拆分“Test”的最后一个字母，你可以用 span 包裹它，然后这样做：

span 
    letter-spacing: 1.1em;
    margin-right: -1.1em;

如您所见，它甚至适用于弹性单元。如果a 上没有自定义边距，您可以跳过添加span 并将此样式直接应用于a

它对我有奇效 =)

【参考方案7】：

出于 SEO 的原因，我不会破坏 tex<span>t</span>，所以我更喜欢用假下划线替换下划线。 CSS calc 可以帮助你调整它的宽度。

a
  text-decoration:none;
  letter-spacing:15px;
  color:red;
  display:inline-block;


a .underline
  height:2px;
  background-color:red;
  width: calc(100% - 15px); /*minus letter spacing*/

<a href="#">Text
<div class="underline"></div></a>