CSS文字在应用字母间距时下划线太长了吗？
只要letter-spacing将其应用于带有下划线或底边框的内容，似乎该下划线就会超出右侧的文本。有什么方法可以防止下划线超出文本的最后一个字母？
例如：
<span style="letter-spacing: 1em; border-bottom: 1px solid black;">Test</span>
也许可以使用固定的宽度<div>和边框，但这实际上不是包围每个带下划线的元素的选择。
谢谢！
问题答案：
问题是“字母间距”通过在每个字母后添加空格来增加空间，但是该空间属于字母，因此最后一个字母有一个额外的下划线，使其看起来像在最后一个字母之外（如果您用鼠标选择div的最后一个字母，您会明白我的意思）。
您可以通过使文本块的最后一个字母不具有“字母间距”属性来解决该问题。例如：
<span style="letter-spacing: 1em; text-decoration: underline;">SPACEEE</span>
<span style="text-decoration: underline;">.</span>
这远非理想，但除非只是一行文本（那里，您可以在右边使用负边距），否则我想不出任何其他解决方案。
-
效果网址 : https://dzone.com 我看了一下, 这个效果感觉挺简单的, 但是自己试了以下感觉还是挺难的 他们网页用到了 js, 不过我是用 css 实现的 我参照着自己做的代码如下 但是效果还有有些诧异, 为了更好看出效果我把过渡时间调整3秒 有没有大佬有好一点的实现方案? 用css或者js都可以
-
问题内容： 使用CSS后，如果应用了文本，是否可以增加文本和下划线之间的距离？ 问题答案： 不可以，但是您可以使用和。 如果要使用与“下划线”相同的颜色（在我的示例中为边框），则只需省略颜色声明，即和。 对于多行，可以将多行文本包装在元素内的跨度中。例如，然后添加并在-
-
我有一个项目，要求我在一段文本中的一些下划线文本下放置一个ID字符串。 下面是一个使用带有灰色边框的内嵌SVG对象来显示布局的示例: 我可以使用带有基线偏移的内联元素接近，然后使用 SVG 来呈现文本。但是，这有一个缺点（我认为），即我必须手动输入 SVG 的宽度（以像素为单位），这对于如此简单的布局来说似乎非常复杂。 下面是它的XSL-FO标记: 所以我的问题是：我可以在Apache FOP X
-
我是新的Liferay开发，我面临的麻烦与启动我的Liferay Tomcat服务器。它几乎需要3分钟（169048毫秒），这对于开发来说是不可接受的。我想把它压缩到一分钟左右。 以下是我的机器的规格： 英特尔酷睿双核T2300@1.66 GHz 4GB RAM（使用中3.24GB) 带有Service Pack 1Windows 7 Enterprise 32位 我正在使用： Liferay 6
-
我想用x（下划线）替换特殊字符（regex\W），但我不想用下划线替换空白，也不想用单个下划线替换多个连续的特殊字符 示例字符串：输出： 字符串：输出： 我试过，但并不准确
-
问题内容： 我遇到了这个问题，我需要使用户易于阅读文本，因此我使用了1 px的字母间距，但看起来很难看，所以我想我将使用0.5 px的半像素，但是不起作用，我尝试使用em属性，但未完成任务。 因此，有一种方法可以使字母间距减半像素（如果可能，请跨浏览器解决方案） 问题答案： 该错误已在2008年报告并得到确认。因此，如果有人觉得要入侵Webkit，会让很多设计师感到高兴。