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

因为字符之间有空格，所以应该在所有浏览器中整齐地包装没问题。当你在那里有像'pneumonoultramicroscopicsilicovolcanoconiosis'这样的话时，你就会出现这个问题。因为没有空格，浏览器将无法知道从哪里开始换行符并手动插入<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/

HTML页面和按钮文本自动换行 - 需要跨浏览器支持

1 个答案: