Menu
I have some html that I am getting from a database. It has an important line break in the code that is needed. It is needed because sometimes one line will be reserved for a question like, for example... "What about you?" <br>
The issue is some lines are longer and they wrap automatically causing the funny formating. When I display it on mobile the <br> is messing up the format. Here is a picture of what it is doing.
Is there any way to keep the <br> and not have the longer lines wrap and leave that leave these bad blanks space? Can I use php to replace something or add something?
HERE IS THE OUTPUT CODE FOR ONE OF THE DAYS:
<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>
707
If you want to remove line break from the text of class "verses". You can code like this:
@media (max-width: 480px) {
.verses br { display: none; }
}
answered Mar 16 '26 20:03
If you want a solution in PHP well, there is an ugly solution using PHP's Output Buffering and PHP Mobile Detect which is a simple one file class library for detecting mobiles.
The idea is to remove each line break after a comma or semi-colon this will leave important line breaks and make your html well formatted, ofcourse you can change this depending on your content structure to detect important line breaks.
Put this at the beginning of your PHP file
$detect = new Mobile_Detect;
$buffer = false;
if($detect->isMobile()){
$buffer = true;
ob_start();
}
and this is at the very end
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;
}
Output
Note if it's not a mobile device nothing will happen, everything well keep working normally with no removal.
But i don't think using PHP for this is a good idea, in case if you wanted to do this with PHP i showed you how, there is in easier solution which is simply using CSS other people here already told you how See Responsive Line Breaks in CSS
you can simply add class .rwd-break to line breaks that you want to remove when on mobile device and
set it to display:none using media queries
Sample 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; }
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
