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

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,但它至少意味着你不必修改和破解你的HTML来实现相同的结果.

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

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

感谢任何反馈!

尼尔

Answer 2

您还可以使用绝对定位的伪元素来实现下划线，并通过使用 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 3

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

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

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

它远非理想,但除非它只是一行文本(在那里,你可以使用右边的负边距),我想不出任何其他解决方案.