Question

我有一个PhoneGap应用程序，它使用jQuery mobile的布局显示无序列表。当您在较小的屏幕上查看应用程序时，文本会重叠，您无法再阅读它。我无法弄清楚如何排队＆＃34;打破＆＃34;因此，当屏幕尺寸减小时，它显示为两条线，而当屏幕尺寸减小时，它显示为一条线。

全屏 Full screen

缩小屏幕 Reduced screen

在第二行，文字消失，并且＆＃34;隐藏＆＃34;通过数值。该块的代码如下所示：

HTML：

<div data-role="content">
        <ul data-role="listview" data-divider-theme="a">
            <li data-role="list-divider"></li>

            <li><b>Revenues</b></li>
            <li>Gross Sales<span class="right">$543,600</span></li>
            <li>Less Sales Returned and Allowances<span class="right">$9,200</span></li>
            <li>Less Sales Discounts<span class="right">$5,100</span></li>

（继续）

CSS：

span.right {
  float: right;
}

Answer 1

这是table的作业：

<!doctype html>
<title>Table demo</title>
<style>
td:nth-child(2) { text-align: right }
</style>
<table><caption>Revenues</caption>
  <tr><td>Gross Sales <td>$543,600
  <tr><td>Less Sales Returned and Allowances <td>$9,200
  <tr><td>Less Sales Discounts <td>$5,100
</table>

如果你真的想要把数字放在最右边，你可以添加CSS规则table { width: 100% }，但没有它就可以更具可读性。

Answer 2

对于较小的屏幕，请使用下面的CSS，以便下一行自动进入范围：

@media only screen and (max-device-width: 480px) {
  span.right {
  display:block;
  text-align:right;
  clear:both;
 } 
}

Answer 3

所以你可以使用

white-space: normal !important;

我正在使用white-space: normal;而没有！重要标记它没有成为＆＃34;包装文字＆＃34;使用JQuery mobile。

Answer 4

向
添加一个类。

示例：

说您只想在下面的自定义屏幕尺寸358px n上打破
。

HTML：

<br class="hidden-ss">

CSS：

@media (min-width: 359px) {
  .hidden-ss {
    display: none !important;
  }
}

实际上，您可能已经定义了多个@media屏幕断点，例如在使用默认Bootstrap时：

HTML：

<br class="visible-ss hidden-xs hidden-sm hidden-md hidden-lg">

定义CSS：

@media (max-width: 358px) {        
  .visible-ss {
    display: block !important;
  }

已经在Bootstrap中预定义了：

@media (max-width: 767px) {
  .hidden-xs {
    display: none !important;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .hidden-sm {
    display: none !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .hidden-md {
    display: none !important;
  }
}
@media (min-width: 1200px) {
  .hidden-lg {
    display: none !important;
  }
}

如何根据屏幕大小打破HTML行

4 个答案: