HTML 按钮标签在 iPhone/iPad 上不自动换行答案

【问题标题】：HTML button tag does not word-wrap on iPhone/iPadHTML 按钮标签在 iPhone/iPad 上不自动换行
【发布时间】：2010-08-12 01:10:54
【问题描述】：

我无法让

示例如下：

<button type="button" style="width:150px; word-wrap:break-word;">some very long text to make it wrap and go to another line</button>;

这个想法是有一个固定宽度的按钮，文本根据需要换行。在最新的 IE、FF 甚至桌面 Safari（Mac 和 PC）中，一切都按预期工作。按钮宽度固定，文字换行，按钮高度自动增加以显示换行。

在 iPhone/iPad 上，文本换行，但按钮高度没有增加。因此，用户无法看到所有文本。

有没有人知道如何在 iPhone/iPad 上像在桌面浏览器上一样工作，或者这是移动 Safari 的限制？

【问题讨论】：

<button type="button" style="width:150px; word-wrap:break-word; overflow:visible;"> 工作吗？
我尝试添加溢出：可见，它没有任何区别。不过，谢谢你的想法。

标签： iphone ipad mobile-safari htmlbutton

【解决方案1】：

好的。这需要大量的试验和错误，但我实际上得到了它的工作。关键是加上“height:100%;”在样式字符串中。取出高度，按钮不会水平增长。如果文本足够长以引起自动换行，则添加高度并且按钮确实会增长。猜测没有指定高度的移动 safari 会感到困惑。去搞清楚。我讨厌编写浏览器代码。想想有多少编程时间浪费在这样的废话上，真是令人作呕。

【讨论】：

我也为此奋斗了几天。不幸的是，您的解决方案对我不起作用，但感谢您的提问。希望有人会发布替代答案。

【解决方案2】：

在做了一些工作后，我发现将它添加到按钮样式可以让按钮在 iOS 移动设备上更好地呈现，但您会丢失一些按钮的默认圆形样式：

-webkit-appearance: none;

【讨论】：

【解决方案3】：

你可以给背景颜色：#dedede。因为IOS不支持“buttonface”颜色。

所以只需将其添加到您的 css 中。

background-color: #dedede;

【讨论】：

【解决方案4】：

如果我从我自己的测试中没记错的话，iPad 根本不会处理按钮元素上的中断。不知道有没有办法解决。

例如这行不通

<button>First<br/>
  Second<br/>
  Third<br/>
  Fourth<br/>
</button>

【讨论】：