CSS应用字母间距时，文本下划线长度太长？ [英] CSS Text underlining too long when letter-spacing is applied?

问题描述

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

例如：

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

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

谢谢！

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

 < span style =letter-spacing：1em; text-decoration：underline;& / span> 
< span style =text-decoration：underline;>。< / span> 
  

这不太理想，但除非它只是一行文本边缘右边），我不能想到任何其他解决方案。

Whenever letter-spacing is applied to something with an underline or a bottom border, it seems like the underline extends beyond the text on the right. Is there any way to do prevent the underline from extending beyond the last letter in the text?

For example:

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

Perhaps it'd be possible with a fixed width <div> and a border, but that is really not an option to surround every underlined element.

Thanks!

解决方案

The problem is that "letter-spacing" adds space by adding white space after each letter, but this space belongs to the letter, and thus the last one has an extra underline that makes it look like it's expanding beyond the last letter (if you select with the mouse the last letter of the div, you'll see what I mean).

You could solve it by having the last letter of the text block not having the "letter-spacing" property. For example:

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

It's far from ideal, but unless it's just a one line text (there, you could use a negative margin to the right), I can't think of any other solution.

这篇关于CSS应用字母间距时，文本下划线长度太长？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！