Question

文本转换的奇怪问题：IE 11中的大写和背靠背。如果没有在跨度内容之前用空格或空格分隔跨度，它将不会大写第一个单词。有什么想法吗？

<html>
<style>
 .upper { text-transform:capitalize; }
</style>
<body>

 <span>Broken:</span><span class="upper">john doe</span>
 <br>

 <span>Working:</span><span class="upper"> john doe</span>
 <br>

 <span>Working:</span>
 <span class="upper">john doe</span>

</body>
</html>

示例：https://jsfiddle.net/57n67xpx/1/

现在我可以用空格包裹我的跨度。尽管如此，还是一个错误......

Answer 1

This is a known interop issue. Implementations disagree on how text-transform: capitalize should behave with respect to punctuation. WebKit is notably the only one to capitalize a letter that immediately follows a punctuation mark without a space in between — everyone else behaves the same as IE. So it would seem that Safari and Chrome are the odd ones out, not IE.

If you absolutely require that a letter following a punctuation mark inline with no intermediate whitespace be capitalized, your best bet is making that element an inline-block. This causes the text in the element to become a separate run of text from the previous element, making the first letter of that element truly be its first letter for the purposes of text-transform: capitalize, but this will be a problem if your text can potentially wrap due to length.

CSS text-transform：capitalize跳过带有背靠背<span>的第一个单词，除非有空格。

1 个答案: