如何根据屏幕尺寸来断行HTML
[英]How to break lines of HTML based on screen size
问题描述
I have a PhoneGap app that displays an unordered list utilizing jQuery mobile's layout. 
我有一个PhoneGap应用，该应用利用jQuery mobile的布局显示无序列表。 When you view the app on a smaller screen, the text overlaps and you can't read it anymore. 当您在较小的屏幕上查看应用程序时，文字会重叠，您将无法再阅读。 I can't figure out how to have the line "break" so that it appears as two lines when the screen size is reduced, and one line when it is not reduced. 我无法弄清楚“ break”行的大小，以便在减小屏幕尺寸时显示为两行，而在不减小屏幕尺寸时显示为一行。
Full screen 全屏
Reduced screen 屏幕缩小
On the second line the text disappears, and is "hidden" by the numerical values. 在第二行上，该文本消失，并被数字值“隐藏”。 The code of that chunk looks like this: 该块的代码如下所示：
HTML: 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>
(continues on) （继续）
CSS: CSS：
span.right {
float: right;
}
4 个解决方案
解决方案1
1 2014-07-08 18:52:46
This is a job for a 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>
If you really want the figures placed on the very right, you can add the CSS rule table { width: 100% } , but the presentation is much more readable without it. 如果您确实希望将数字放在最右边，则可以添加CSS规则table { width: 100% } ，但是如果没有它，则演示文稿的可读性会更高。
解决方案2
0 2014-07-08 18:44:50
For smaller screens please use the CSS below so the span automatically comes in with the next line: 对于较小的屏幕，请使用下面的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
so you can use 所以你可以使用
white-space: normal !important;
I was using white-space: normal; 我正在使用white-space: normal; without the !important tag it does not become "wrap text" with JQuery mobile. 如果没有！important标记，则在JQuery mobile中不会变为“自动换行”。
解决方案4
0 2018-09-03 12:12:54
Add a class to <br>. 将一个类添加到<br>。
Example: 例：
Say u want to break <br> only at a custom screen size 358px n below. 假设您只想在以下358px n的自定义屏幕上打破<br>。
HTML: HTML：
<br class="hidden-ss">
CSS: CSS：
@media (min-width: 359px) {
.hidden-ss {
display: none !important;
}
}
In reality u may have multiple @media screen breaking points already defined, eg when using default Bootstrap: 实际上，您可能已经定义了多个@media屏幕断点，例如，使用默认的Bootstrap时：
HTML: HTML：
<br class="visible-ss hidden-xs hidden-sm hidden-md hidden-lg">
Define CSS: 定义CSS：
@media (max-width: 358px) {
.visible-ss {
display: block !important;
}
Already pre-defined in Bootstrap: 已经在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.