每当letter-spacing应用于带有下划线或底部边框的东西时，下划线似乎超出了右侧的文本。有什么办法可以防止下划线超出文本中的最后一个字母？
例如：
<span style="letter-spacing: 1em; border-bottom: 1px solid black;">Test</span>
也许可以使用固定的宽度<div>和边框，但这实际上不是围绕每个带下划线的元素的选择。
谢谢！
问问题
10391 次
7 回答
9
它并不完美，但到目前为止我想出的最好的解决方案是用 :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 伪元素）上添加 text-indent 0.5em（我们在顶部示例中使用的 1em 字母间距的一半）应该可以解决此问题，尽管我尚未对此进行测试。
任何反馈都将不胜感激！
尼尔
于 2011-12-05T14:45:32.660 回答
7
问题是“字母间距”通过在每个字母后添加空格来增加空格，但是这个空格属于字母，因此最后一个有一个额外的下划线，使它看起来像是在扩展最后一个字母（如果你用鼠标选择 div 的最后一个字母，你会明白我的意思）。
您可以通过使文本块的最后一个字母没有“字母间距”属性来解决它。例如：
<span style="letter-spacing: 1em; text-decoration: underline;">SPACEEE</span>
<span style="text-decoration: underline;">.</span>
这远非理想，但除非它只是一个单行文本（在那里，您可以使用右侧的负边距），否则我想不出任何其他解决方案。
于 2010-10-25T14:12:05.833 回答
4
您还可以使用绝对定位的伪元素来实现下划线，并通过使用 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;
}
于 2018-01-12T02:02:34.190 回答
1
据我所知，你对此无能为力。我猜大多数浏览器都会在每个字母之后添加字母间距，包括最后一个。没有任何 CSS 属性可以更好地控制字母间距。
这似乎解决了我 Mac 上的 Firefox 3.6 中的问题，但对每个带下划线的元素都这样做也不是很实用。
<span style="border-bottom: 1px solid black;">
<span style="letter-spacing: 1em;">Tes</span>t
</span>
于 2010-10-25T14:10:39.157 回答
0
感谢您的回复，我想这是 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 中相当有限（特别是试图定义线条与文本之间的距离、粗细等），但我想这现在可行。
于 2010-10-26T16:55:40.113 回答
0
如果您不想拆分“Test”的最后一个字母，您可以用 a 包裹它span并执行以下操作：
span {
letter-spacing: 1.1em;
margin-right: -1.1em;
}
如您所见，它甚至可以与弹性单元一起使用。如果没有自定义边距a，您可以跳过添加span并将此样式直接应用于a
它对我有用=）
于 2011-01-13T05:00:45.573 回答
0
我不会tex<span>t</span>因为 SEO 的原因而中断，所以我更喜欢用假的下划线代替。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>于 2018-02-27T20:44:26.717 回答