如何根據屏幕大小斷開HTML行

我有一個PhoneGap應用程序，它使用jQuery mobile的佈局顯示無序列表。當您在較小的屏幕上查看應用程序時，文本會重疊，您無法再閱讀它。我無法弄清楚如何讓行「中斷」，以便在縮小屏幕尺寸時顯示爲兩行，而不縮小時顯示爲一行。如何根據屏幕大小斷開HTML行

全屏 Full screen

縮小畫面 Reduced screen

在第二行中的文本消失，並且是「隱藏的」由數值。該塊的代碼如下所示：

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

來源

2014-07-08 user3413170

請發佈您的HTML + CSS。 – Dai

發佈的代碼不會*在圖像中產生渲染。您的設置會導致用省略號表示的截斷。 –

我用JQuery手機的CSS和Javascript來製作圖片，你看到的是他們一般格式的產品。 – user3413170

這樣你就可以

white-space: normal !important;

我用white-space: normal;沒有！重要的標記它不會成爲「換行」與jQuery Mobile的使用。

來源

2014-07-11 04:04:06 user3413170

對於較小的屏幕上，請使用以下CSS這樣的跨度自動開始與下一行：

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

來源

2014-07-08 18:44:50 codeee

這不僅帶來了項下一條線，「少銷售退換」行仍是隱藏的小屏幕上尺寸 – user3413170

這是一個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% }，但表現是更可讀離不開它。

來源

2014-07-08 18:52:46

這是在功能方面是什麼在起作用，但有沒有辦法用列表來做到這一點？（格式更改） – user3413170

如何根據屏幕大小斷開HTML行

回答

相關問題