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上自動換行

回答

相關問題