jquery - 菜单的文字不适合小屏幕

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希望这有帮助!