PHP - 使用预先格式化的html进行移动视图
我有一些从数据库中获取的HTML。它在代码中有一个重要的换行符。这是必要的，因为有时会为一个问题保留一行，例如......＆＃34;你怎么样？＆＃34; <br>
问题是一些线条更长并且它们自动换行导致有趣的格式化。当我在移动设备上显示它时，<br>正在弄乱格式。这是它正在做的事情的图片。
有没有办法保留<br>并且没有更长的行换行并留下这些空白空间？我可以使用php替换某些内容或添加内容吗？
以下是其中一天的输出代码：
<body>
<div id="date" align="center">12/18/14</div>
<div id="Mary">
<div id="Title">Daily Mass Readings</div>
<div id="Header">1st Reading:</div><div id="Verses">jer 23:5-8</div>
<div id="Content">Behold, the days are coming, says the LORD,<br>when I will raise up a righteous shoot to David;<br>As king he shall reign and govern wisely,<br>he shall do what is just and right in the land.<br>In his days Judah shall be saved,<br>Israel shall dwell in security.<br>This is the name they give him:<br>“The LORD our justice.”<br><br>Therefore, the days will come, says the LORD,<br>when they shall no longer say, “As the LORD lives,<br>who brought the children of Israel out of the land of Egypt”;<br>but rather, "As the LORD lives,<br>who brought the descendants of the house of Israel<br>up from the land of the north”– <br>and from all the lands to which I banished them;<br>they shall again live on their own land.<br></div>
<hr>
<br>
<div id="Header">Psalms:</div>
<div id="Verses">ps 72:1-2, 12-13, 18-19</div>
<div id="Content">R. (see 7) <b>Justice shall flourish in his time, and fullness of peace for ever.</b><br>O God, with your judgment endow the king,<br>and with your justice, the king’s son;<br>He shall govern your people with justice<br>and your afflicted ones with judgment.<br>R. <b>Justice shall flourish in his time, and fullness of peace for ever.</b><br>For he shall rescue the poor when he cries out,<br>and the afflicted when he has no one to help him.<br>He shall have pity for the lowly and the poor;<br>the lives of the poor he shall save.<br>R. <b>Justice shall flourish in his time, and fullness of peace for ever.</b><br>Blessed be the LORD, the God of Israel,<br>who alone does wondrous deeds.<br>And blessed forever be his glorious name;<br>may the whole earth be filled with his glory.<br>R.<b> Justice shall flourish in his time, and fullness of peace for ever.</b><br>Alleluia<br>R. <b>Alleluia, alleluia.</b><br>O Leader of the House of Israel,<br>giver of the Law to Moses on Sinai:<br>come to rescue us with your mighty power!<br>R. <b>Alleluia, alleluia.</b><br></div>
<hr>
<br>
<div id="Header">Gospel:</div>
<div id="Verses">---</div>
<div id="Content">This is how the birth of Jesus Christ came about. <br>When his mother Mary was betrothed to Joseph,<br>but before they lived together,<br>she was found with child through the Holy Spirit. <br>Joseph her husband, since he was a righteous man,<br>yet unwilling to expose her to shame,<br>decided to divorce her quietly. <br>Such was his intention when, behold,<br>the angel of the Lord appeared to him in a dream and said, <br>“Joseph, son of David,<br>do not be afraid to take Mary your wife into your home. <br>For it is through the Holy Spirit<br>that this child has been conceived in her. <br>She will bear a son and you are to name him Jesus,<br>because he will save his people from their sins.” <br>All this took place to fulfill<br>what the Lord had said through the prophet:<br><br>Behold, the virgin shall be with child and bear a son,<br>and they shall name him Emmanuel,<br><br>which means “God is with us.” <br>When Joseph awoke,<br>he did as the angel of the Lord had commanded him<br>and took his wife into his home. <br>He had no relations with her until she bore a son,<br>and he named him Jesus.<br></div><br>
<br>
</div>
</body>
5 个答案:
答案 0 :(得分：9)
如果要从“verses”类的文本中删除换行符。您可以这样编码：
@media (max-width: 480px) {
.verses br { display: none; }
}
答案 1 :(得分：3)
如果你想要一个PHP解决方案，有一个丑陋的解决方案，使用PHP的输出缓冲和PHP Mobile Detect，这是一个简单的文件类库，用于检测手机。
我的想法是在逗号或分号之后删除每个换行符，这会留下重要的换行符并使您的html格式化，当然您可以更改此根据您的内容结构来检测重要的换行符。
将它放在PHP文件的开头
$detect = new Mobile_Detect;
$buffer = false;
if($detect->isMobile()){
$buffer = true;
ob_start();
}
这就在最后
if($buffer){
// now all page output is captured in $html replace as you need
// i'm removing any ,<br> or ;<br> and .<br> as an example
$html = str_replace([',<br>',';<br>','.<br>'],[', ','; ','. '],ob_get_contents());
ob_end_clean();
echo $html;
}
工作示例
<?php
require 'mobile_detect.php';
$detect = new Mobile_Detect;
$buffer = false;
if($detect->isMobile()){
$buffer = true;
ob_start();
}
?>
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="date" align="center">12/18/14</div>
<div id="Mary">
<div id="Title">Daily Mass Readings</div>
<div id="Header">1st Reading:</div><div id="Verses">jer 23:5-8</div>
<div id="Content">Behold, the days are coming, says the LORD,<br>when I will raise up a righteous shoot to David;<br>As king he shall reign and govern wisely,<br>he shall do what is just and right in the land.<br>In his days Judah shall be saved,<br>Israel shall dwell in security.<br>This is the name they give him:<br>“The LORD our justice.”<br><br>Therefore, the days will come, says the LORD,<br>when they shall no longer say, “As the LORD lives,<br>who brought the children of Israel out of the land of Egypt”;<br>but rather, "As the LORD lives,<br>who brought the descendants of the house of Israel<br>up from the land of the north”– <br>and from all the lands to which I banished them;<br>they shall again live on their own land.<br></div>
<hr>
<br>
<div id="Header">Psalms:</div>
<div id="Verses">ps 72:1-2, 12-13, 18-19</div>
<div id="Content">R. (see 7) <b>Justice shall flourish in his time, and fullness of peace for ever.</b><br>O God, with your judgment endow the king,<br>and with your justice, the king’s son;<br>He shall govern your people with justice<br>and your afflicted ones with judgment.<br>R. <b>Justice shall flourish in his time, and fullness of peace for ever.</b><br>For he shall rescue the poor when he cries out,<br>and the afflicted when he has no one to help him.<br>He shall have pity for the lowly and the poor;<br>the lives of the poor he shall save.<br>R. <b>Justice shall flourish in his time, and fullness of peace for ever.</b><br>Blessed be the LORD, the God of Israel,<br>who alone does wondrous deeds.<br>And blessed forever be his glorious name;<br>may the whole earth be filled with his glory.<br>R.<b> Justice shall flourish in his time, and fullness of peace for ever.</b><br>Alleluia<br>R. <b>Alleluia, alleluia.</b><br>O Leader of the House of Israel,<br>giver of the Law to Moses on Sinai:<br>come to rescue us with your mighty power!<br>R. <b>Alleluia, alleluia.</b><br></div>
<hr>
<br>
<div id="Header">Gospel:</div>
<div id="Verses">---</div>
<div id="Content">This is how the birth of Jesus Christ came about. <br>When his mother Mary was betrothed to Joseph,<br>but before they lived together,<br>she was found with child through the Holy Spirit. <br>Joseph her husband, since he was a righteous man,<br>yet unwilling to expose her to shame,<br>decided to divorce her quietly. <br>Such was his intention when, behold,<br>the angel of the Lord appeared to him in a dream and said, <br>“Joseph, son of David,<br>do not be afraid to take Mary your wife into your home. <br>For it is through the Holy Spirit<br>that this child has been conceived in her. <br>She will bear a son and you are to name him Jesus,<br>because he will save his people from their sins.” <br>All this took place to fulfill<br>what the Lord had said through the prophet:<br><br>Behold, the virgin shall be with child and bear a son,<br>and they shall name him Emmanuel,<br><br>which means “God is with us.” <br>When Joseph awoke,<br>he did as the angel of the Lord had commanded him<br>and took his wife into his home. <br>He had no relations with her until she bore a son,<br>and he named him Jesus.<br></div><br>
<br>
</div>
</body>
</html>
<?php
if($buffer){
$html = str_replace([',<br>',';<br>','.<br>'],[', ','; ','. '],ob_get_contents());
ob_end_clean();
echo $html;
}
<强>输出
注意如果它不是移动设备什么都不会发生，一切都能正常工作而不会移除。
但我不认为使用PHP这是一个好主意，如果你想用PHP做这个我告诉你如何，有更容易的解决方案，只是使用CSS其他人已经告诉你如何见Responsive Line Breaks in CSS
您只需将类.rwd-break添加到要在移动设备上删除的换行符即可
使用媒体查询将其设置为display:none
示例HTML
<h1>You don’t understand! I coulda had class. <br class="rwd-break">I coulda been a contender</h1>
CSS
@media screen and (min-width: 768px){
.rwd-break { display: none; }
}
答案 2 :(得分：1)
也许你可以试试这样的东西（类似于@Md Shawon回答）：
@media (max-width: 480px){ // or other resolution
.verses + br { display: none;} /*or whatever do you want to do with that*/
.Content + br { display: none;}
}
答案 3 :(得分：0)
尝试通过PHP解决这个问题并不是那么明智。在这种情况下，您需要知道用户屏幕宽度并计算每行的最大字母数，对我来说听起来很奇怪...只需使用CSS并隐藏所需内容中的所有<br>。
答案 4 :(得分：0)
使用jQuery。请在此处查看：http://jsfiddle.net/aorbzrky/
$(window).resize(function() {
var width = $(this).width();
if (width <= 480) {
$('#Content').find('br').remove();
}
});
如果要在窗口调整大小并通过480px阈值时保留换行符，请使用以下
var elems = $('#Content').html();
var arr = jQuery.makeArray( elems );
$(window).resize(function() {
var width = $('#Content').width();
if (width <= 480) {
$('#Content').find('br').remove();
} else {
$('#Content').each(function(i) {
$(this).html( arr[i] );
});
}
});
在此处查看http://jsfiddle.net/aorbzrky/1/ 或者在这里 http://jsfiddle.net/aorbzrky/2/
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？