HTML頁面和按鈕文本自動換行 - 需要跨瀏覽器支持

Question

我正在尋找一種跨瀏覽器支持的方式來換行按鈕文本。

瀏覽器如何支持以下代碼？我的意思是，如果按鈕文字寬度超過100像素，他們會自動換行嗎？

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

因爲你有字符之間的空間，應該在所有的瀏覽器整齊地包裹沒有問題。當你在那裏有像'pneumonoultramicroscopicsilicovolcancaniosis'這樣的詞彙時，你會遇到這個問題。由於沒有空格，因此瀏覽器不知道從哪裏開始換行並手動插入<br>標籤會導致一些不可維護的代碼。

查看我下面發佈的鏈接。它有一些關於包裝文本或截斷它的好技巧。我最喜歡的訣竅是使用下面的CSS來執行截斷：

text-overflow: ellipsis; 

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

然後給一個title屬性，以您的按鈕具有所有的文字。當用戶懸停時，它會讀出所有的文字。

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