如何根据屏幕大小换行 HTML答案

【问题标题】：How to break lines of HTML based on screen size如何根据屏幕大小换行 HTML
【发布时间】：2014-07-08 18:35:03
【问题描述】：

我有一个 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+CSS。
发布的代码不会在图像中生成渲染。您的设置会导致截断，并用省略号表示。
我使用了 JQuery mobiles 的 CSS 和 Javascript 来生成图像，你看到的是它们一般格式的产物。

标签： html screen-size

【解决方案1】：

向
添加一个类。

例子：

假设你只想在自定义屏幕尺寸 358px n 下面打破
。

HTML：

<br class="hidden-ss">

CSS：

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

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

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;
  }
}

【讨论】：

【解决方案2】：

这是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% }，但是没有它，演示文稿的可读性会好得多。

【讨论】：

这在功能方面是可行的，但是列表没有办法做到这一点吗？（格式改变）

【解决方案3】：

对于较小的屏幕，请使用下面的 CSS，以便 span 自动出现在下一行：

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

【讨论】：

这只是将项降低了一行，在较小的屏幕尺寸上仍然隐藏了“较少的销售额”行

【解决方案4】：

所以你可以使用

white-space: normal !important;

我使用的 white-space: normal; 没有 !important 标记，它不会成为 JQuery 移动版的“换行文本”。

【讨论】：