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

我无法在iPhone/iPad上正确渲染元素

以下是示例：

<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限制？

如果我从自己的测试中正确地回忆起，iPad根本不能处理按钮元素的断裂。不知道有没有办法

e、 这行不通

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

首先

第二个

第三个

第四

好的。这需要很多的尝试和错误，但我确实做到了。关键是在样式字符串中添加“height:100%；”。取出高度，按钮不会水平增长。如果文本足够长，导致换行，则添加高度和按钮会增加。猜测没有指定高度的移动safari会感到困惑。想想看，我讨厌写浏览器代码。想想有多少编程时间被浪费在这样的垃圾上真让人恶心。

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

-webkit-appearance: none;

---

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

所以只需在css中添加这个

background-color: #dedede;

---

有效吗？我尝试添加overflow:visible，但没有任何区别。不过，谢谢你的主意。我也为此奋斗了几天。不幸的是，你的解决方案对我不起作用，但是谢谢你的提问。希望有人会发布另一个答案。