Question

每当letter-spacing应用于带下划线或下边框的内容时，下划线似乎都会延伸到右侧的文本之外。有没有办法阻止下划线超出文本中的最后一个字母？

例如：

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

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

谢谢！

Answer 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元素具有2px字母间距，居中文本以及在文本和下划线之间添加空格的下划线。我的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，但它至少意味着你不必修改＆amp;破解你的HTML以获得相同的结果。

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

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

感激地收到任何反馈！

尼尔

Answer 2

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

你可以通过让文本块的最后一个字母没有“letter-spacing”属性来解决它。例如：

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

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

Answer 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

Answer 4

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

这似乎解决了我在Mac上的Firefox 3.6中的问题，但是对于每个带下划线的元素来说，这也不是非常实用。

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

Answer 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（尤其是尝试定义直线与文本之间的距离，厚度等），下划线的控制相当有限，但我认为现在可以使用。

Answer 6

如果你不想拆分“Test”的最后一个字母，你可以用span包裹它并执行此操作：

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

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

它为我创造奇迹=）

Answer 7

出于搜索引擎优化的原因，我不会打破tex<span>t</span>，所以我更愿意用伪造的替换下划线。 CSS calc可以帮助你扩展它的宽度。

＆＃13;

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*/
}

＆＃13;

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

＆＃13;

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

7 个答案: