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

问题描述 投票:0回答:4

我有一个PhoneGap应用程序,它使用jQuery mobile的布局显示无序列表。当您在较小的屏幕上查看应用程序时,文本会重叠,您无法再阅读它。我无法弄清楚如何让线条“断开”,以便在屏幕尺寸减小时显示为两条线,而在不减小时显示为一条线。

全屏

减少屏幕

在第二行,文本消失,并由数值“隐藏”。该块的代码如下所示:

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;
}
html screen-size
4个回答
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% },但如果没有它,表示更具可读性。


0
投票

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

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

0
投票

所以你可以使用

white-space: normal !important;

我使用的white-space: normal;没有!important标签它不会成为JQuery mobile的“wrap text”。


0
投票

将一个类添加到<br>。

例:

假设你只想在下面的自定义屏幕尺寸为358px n时打破<br>。

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;
  }
}
热门问题
推荐问题
最新问题