菜单的文字不适合小屏幕

Question

这里是jsFiddle。如您所见，当您使结果屏幕等于手机屏幕的宽度时，问题就出现了。然后，文本不会更改行，而是会丢失（并被点替换）。此外，您甚至无法滚动来获取它（这仍然很糟糕，但可能是一个后备计划）。

这是实际代码：

<a href="#popupNested" data-rel="popup" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-info ui-btn-icon-left ui-btn-b" data-transition="slidedown">Info</a>
  <div data-role="popup" id="popupNested" data-theme="none">
    <div data-role="collapsibleset" data-theme="b" data-content-theme="a" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" style="margin:0;">
      <div data-role="collapsible" data-inset="false">
        <h2>Must save</h2>
        <ul data-role="listview" data-icon="false">
          <li><a href="#" data-rel="dialog">If you don't save, changes won't apply!</a></li>
        </ul>
      </div><!-- /collapsible -->
    </div><!-- /collapsible set -->
  </div><!-- /popup -->

正如您在 fiddle 的评论中看到的那样，我试图用 data-mode="reflow" class="ui-responsive table-stroke" 解决这个问题，我在关于表格的问题上找到了它，但它没有用。

我该如何解决这个问题？

Answer 1

最好的办法是在句子中间放置一个 <br> 标记并将溢出设置为可见。和文本溢出剪辑（默认值）。（或首字母。）看看这个 fiddle 希望这有帮助！

菜单的文字不适合小屏幕

menu's text is not fitting small screen

css

jquery

overflow

jquery-mobile