HTMLページとボタンテキスト自動ラッピング - クロスブラウザサポートが必要です

Question

ボタンテキストをラップするクロスブラウザ対応の方法を探しています。

ブラウザは次のコードをどの程度サポートしていますか？つまり、ボタンのテキストの幅が100pxを超えるとテキストを自動折り返しますか？

Mozilla Firefoxは、テキストを素早く折り返しているようです。

<table style="width: 100px"> 
 
<tr> 
 
<td><button>a a a a a a a a a a a a a a a a a a a a</button></td> 
 
</tr> 
 
</table>

それとも私の代わりにこのコードを使用する必要がありますか？

<table style="width: 100px"> 
 
<tr> 
 
<td><button>a a a a a a<br />a a a a a a<br />a a a a a a<br />a a</button></td> 
 
</tr> 
 
</table>

Answer 1

あなたはすべてのブラウザできちんと何の問題をラップするべきではない文字の間にスペースを、持っているので。この問題は、「肺門マイクロスコピーシリコンベノコノコシス」のような言葉があるときに発生します。空白がないので、ブラウザは改行を開始する場所を知りません。手動で<br>タグを挿入すると、かなり維持不能なコードが生成されます。

以下に投稿したリンクをご確認ください。テキストの折り返しや切り捨てには、いくつかのヒントがあります。

text-overflow: ellipsis; 

    /* Required for text-overflow to do anything */ 
    white-space: nowrap; 
    overflow: hidden; 

そして、あなたのテキストのすべてを持っているあなたのボタンにtitleプロパティを与える：私のお気に入りのトリックは切り捨てを強制するために、次のCSSを使用することです。ユーザーが飛ぶと、すべてのテキストが読み上げられます。

https://css-tricks.com/almanac/properties/o/overflow-wrap/