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

我无法在iPhone/iPad上正确呈现<按钮>元素。HTML按钮标签不能在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的限制？

来源

2010-08-12 bcuzz

不'

我试图添加溢出：可见和它没有区别。不过谢谢你的想法。 – bcuzz 2010-08-12 13:52:34

好的。这花了很多尝试和错误，但我实际上得到它的工作。关键是增加“身高：100％;”在样式字符串中。取出高度，按钮不会水平增长。如果文字足够长以导致单词换行，请增加高度并增加按钮。猜测没有指定的高度移动Safari浏览器会感到困惑。去搞清楚。我讨厌编写浏览器代码。令人讨厌的想法是这样浪费了多少编程时间。

来源

2010-08-13 02:31:37 bcuzz

我也一直在为此奋战几天。不幸的是，你的解决方案并不适合我，但感谢这个问题。希望有人会发布一个备用答案。 – Mark 2012-09-17 05:53:02

-1

如果我从我自己的测试中正确记得，iPad根本不处理按钮元素上的中断。不知道是否有任何方法。

例如这将不起作用

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

来源

2010-08-12 02:53:00 scunliffe

做了一些工作，我发现，添加这按钮样式允许按钮呈现在iOS移动设备更好，但之后你失去了一个小按钮的默认圆形造型：

-webkit-appearance: none;

来源

2012-09-17 12:42:10 Mark

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

回答

相关问题