在列表项/按钮中换行而不是隐藏溢出答案

【问题标题】：Wrap text in list items/buttons instead of hiding the overflow在列表项/按钮中换行而不是隐藏溢出
【发布时间】：2011-05-18 07:02:56
【问题描述】：

我正在尝试覆盖 jQuery Mobile 中列表项和按钮的默认行为，其中包含不适合一行的文本作为隐藏溢出。

如果您在窄浏览器窗口或 iPhone 上查看此内容，您会明白我的意思：http://m.gizmag.com

我希望能够将每个列表项的 h3 和 p 标签中的文本换行。

提前致谢！

【问题讨论】：

【解决方案1】：

尝试为元素设置white-space:normal 的样式。

我只是在 jQuery Mobile 列表视图样式的li 中使用锚 (<a>) 元素来完成此操作，它可以按我的预期包裹文本。我使用 Chrome 的开发人员工具来确定 CSS 属性的来源，并以交互方式更改它们以使其按我想要的方式工作。

-- 德里克

【讨论】：

解决这个问题是个好主意。创建一个可以做到这一点的 CSS 类会很好。我也想过使用字幕行为。
不知道你为什么没有得到这个问题。 “空白：正常”非常适合我。
JQuery Mobile 将列表项重写为包含
因此此样式选择器有效： div.ui-btn-text { white-space:normal; }
因为它是一个列表，所以这对我有用：.ui-li-desc { white-space: normal; !important}
我试过这个并且它有效，但现在在我的 NavBar 上有三个按钮，其中两个包裹文本（导致更大的按钮）而一个没有，所以我得到了不同的高度： i.imgur.com/kpwesC5.png我该如何解决？

【解决方案2】：

如果可行，将其包含在 <div> 中也会使其回绕。（但找到受影响的元素并声明white-space:normal 是更合适的解决方案）

【讨论】：