HTML按钮标签不会在iPhone / iPad上自动换行-Java 学习之路

我无法在iPhone / iPad上正确呈现<button>元素 .

这是样本：

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

4 回答

0

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

回复于 2024-05-02T11:03:52+08:00
1
您可以给出背景颜色：#dedede . 因为IOS不支持“buttonface”颜色 .

所以只需在你的CSS上添加它 .
```
background-color: #dedede;
```
回复于 2024-05-02T11:03:52+08:00
-1
做了一些工作之后我发现将它添加到按钮样式允许按钮在iOS移动设备上呈现更好但是你丢失了一些按钮的默认圆形样式：
```
-webkit-appearance: none;
```
回复于 2024-05-02T11:03:52+08:00
1
如果我从自己的测试中正确回想起来，iPad根本不会处理按钮元素上的中断 . 不知道是否有任何解决方法 .

例如这不行
```
<button>First

  Second

  Third

  Fourth

</button>
```
回复于 2024-05-02T11:03:52+08:00