CSS text-transform：capitalizeは、空白を除いて、先頭から末尾まで<span>をスキップします。

text-transformの奇妙な問題：IE 11の大文字と小文字のスパン。スパンの内容の前の空白または空白でスパンを区切らずに最初の単語を大文字に変換しません。何か案は？CSS text-transform：capitalizeは、空白を除いて、先頭から末尾まで<span>をスキップします。

<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/

私は空白で私のスパンをラップすることができます。それにもかかわらず、バグ...

出典

2017-03-22 Airman

これはIE 11でのみ発生しますか？ – Rico

Chromeでは問題ありません。私は他の人をテストしていない。 – Airman

これはknown interop issueです。実装は、text-transform: capitalizeがどのように句読点に関して動作すべきかについては同意しない。 WebKitは、句読点のすぐ後ろにスペースを入れずに文字を大文字に変換する唯一のものです。他のすべてのユーザーはIEと同じように動作します。だから、SafariとChromeはIE以外の奇妙なものだと思われる。

中間の空白がないインラインで区切られた句読点の後にある文字を大文字にする必要がある場合は、その要素をインラインブロックにすることをお勧めします。これにより、要素内のテキストが前の要素とは別のテキスト行になり、その要素の最初の文字が実際にtext-transform: capitalizeの目的のための最初の文字になりますが、テキストが期限切れになる可能性がある場合は問題になります長さ

出典

2017-03-22 18:40:18 BoltClock

説明をありがとう。私のCSSでは、各スパンではなくインラインブロック要素であるdivにスパンのペアをラップしていました。 – Airman

CSS text-transform：capitalizeは、空白を除いて、先頭から末尾まで<span>をスキップします。

答えて

関連する問題