每當letter-spacing應用於具有下劃線或底部邊框的東西時，好像下劃線超出了右邊的文本。有什麼辦法可以防止下劃線超出文本中的最後一個字母？應用字母間距時CSS文本下劃線太長？
例如：
<span style="letter-spacing: 1em; border-bottom: 1px solid black;">Test</span>
也許它會是可能的固定寬度<div>和邊界，但是這真的不是圍繞每一個帶下劃線的元素的選項。
謝謝！
的問題是，「字母間距」每個字母后加空格增加空間，但這個空間屬於字母，所以最後一個有一個額外的下劃線，使得它看起來就像是擴大超出最後一個字母（如果你用鼠標選擇div的最後一個字母，你會明白我的意思）。
您可以通過使文本塊的最後一個字母不具有「letter-spacing」屬性來解決此問題。例如：
<span style="letter-spacing: 1em; text-decoration: underline;">SPACEEE</span>
<span style="text-decoration: underline;">.</span>
這是很不理想，但除非它只是一個行文本（在那裏，你可以使用陰性切緣向右），我想不出任何其他的解決方案。
據我所知，你無能爲力。我猜大多數瀏覽器在每封信後都會添加字母間距，包括最後一個字母。沒有任何CSS屬性可以更好地控制字母間距。
這似乎解決了我的Mac上的Firefox 3.6中的問題，但對於每個帶下劃線的元素來說，這並不是超實用的。
<span style="border-bottom: 1px solid black;">
<span style="letter-spacing: 1em;">Tes</span>t
</span>
感謝您的回覆，我想這是一個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（特別是試圖定義距離線條和文字之間，厚度等），但我認爲這現在可行。
如果你不想分裂「測試」的最後一個字母，你可以用span包住它，這樣做：
span {
letter-spacing: 1.1em;
margin-right: -1.1em;
}
正如你可以看到它甚至與彈性單元的作品。如果沒有對a定製的保證金，你可以跳過添加span和直接應用這種風格a
它可以創造奇蹟，我=）
它並不完美，但最好的解決方案，我來了到目前爲止，就是用僞元素掩蓋它。這樣在整個文本中就不需要額外的元素。
例如：
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字母間距的一半）應該修復了這個問題，儘管我還沒有測試過。
收到任何反饋意見！
尼爾
不錯的解決方案，謝謝 – alemur 2014-09-05 13:29:18
你也可以使用一個絕對定位僞元素實現了下劃線，並通過櫃檯用左，右鍵屬性指定它的偏移量。點擊下面的例子。
<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-12 02:08:32
我不會打破tex<span>t</span>的搜索引擎優化的原因，所以我更喜歡用假的來代替下劃線。 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>
有趣的問題，+1。但是你應該使用'span'作爲例子，否則人們會被'div'佔據100％寬度的事實誤導 – 2010-10-25 14:03:16
感謝你，是的，跨度確實更有意義！ – waffl 2010-10-26 16:54:34