如何根據屏幕尺寸來斷行HTML
[英]How to break lines of HTML based on screen size
問題描述
我有一個PhoneGap應用，該應用利用jQuery mobile的布局顯示無序列表。 當您在較小的屏幕上查看應用程序時，文字會重疊，您將無法再閱讀。 我無法弄清楚“ break”行的大小，以便在減小屏幕尺寸時顯示為兩行，而在不減小屏幕尺寸時顯示為一行。
全屏
屏幕縮小
在第二行上，該文本消失，並被數字值“隱藏”。 該塊的代碼如下所示：
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;
}
4 個解決方案
解決方案1
1 2014-07-08 18:52:46
這是一張桌子的工作：
<!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% } ，但是如果沒有它，則演示文稿的可讀性會更高。
解決方案2
0 2014-07-08 18:44:50
對於較小的屏幕，請使用下面的CSS，以便下一行自動顯示跨度：
@media only screen and (max-device-width: 480px) {
span.right {
display:block;
text-align:right;
clear:both;
}
}
解決方案3
0 已采納 2014-07-11 04:04:06
所以你可以使用
white-space: normal !important;
我正在使用white-space: normal; 如果沒有！important標記，則在JQuery mobile中不會變為“自動換行”。
解決方案4
0 2018-09-03 12:12:54
將一個類添加到<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;
}
}
如何根據窗口大小自動斷行
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.