HTML按钮标签不会在iPhone / iPad上自动换行 [英] HTML button tag does not word-wrap on iPhone/iPad

问题描述

我无法获得< button>要在iPhone / iPad上正确呈现的元素。

I am having trouble getting the <button> element to render correctly on the 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）中，事情都按预期工作。按钮宽度是固定的，文本包装，按钮高度自动增加以显示包裹的线条。

The idea is to have a fixed width button and the text wraps as needed. In newest IE, FF, and even desktop Safari (Mac and PC) things work as expected. The button width is fixed, the text wraps, and the button height automatically is increased to show the wrapped lines.

在iPhone / iPad上，文本包装，但是按钮高度不会增加。因此，用户无法看到所有文本。

On the iPhone/iPad, the text wraps, but the button height does not increase. Thus, the user cannot see all the text.

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

Does anyone have an idea on how to make this work on the iPhone/iPad like on the desktop browser or is this a mobile Safari limitation?

推荐答案

好的。这需要大量的试验和错误，但我实际上已经开始工作了。关键是要增加身高：100％;在样式字符串中。取出高度，按钮不会水平增长。添加高度，如果文本足够长以导致自动换行，则按钮会增长。没有指定高度的猜测移动野生动物园会感到困惑。去搞清楚。我讨厌编写浏览器代码。令人厌恶的是想到这样的浪费了多少编程时间。

Ok. This took a lot of trial and error, but I actually got it to work. The key is to add "height:100%;" in the style string. Take out the height and the button does not grow horizontally. Add height and the button does grow if the text is long enough to cause a word-wrap. Guess without a height specified mobile safari gets confused. Go figure. I hate writing browser code. Sickening to think how many programming hours are wasted on crap like this.

这篇关于HTML按钮标签不会在iPhone / iPad上自动换行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！