HTML text expanding all the way to right
Question
I am reading a text document and printing it in my webpage but the text goes all the way to right and i don't want to scroll all the way to right
.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>
{{text}}</p>
</body>
</html>
I don't want to scroll to right and i just want to scroll down and see the entire text. And i cant find a way to do that
3 answers
solution1
1 ACCPTED 2018-04-14 12:44:33
You need to add word-wrap css
p {
word-wrap: break-word;
}
solution2
1 2018-04-14 12:46:39
You can try styling your div to ensure that the text wraps
div.long-text{ max-width:100%; word-wrap: break-word; padding: 0.5rem; }
<div class="long-text">Lorem ipsum dolor sit amet, te per feugiat tractatos? Sed ei nonumes deserunt adipiscing, at vidit reque vis, in libris eruditi accumsan vix. At duo prima ludus quidam, congue primis cu eum, habeo ocurreret cum ex? Ei postea eruditi tincidunt pri, quo ut maiestatis quaerendum, eum lorem iriure reprimique eu. <br> <br> Loremipsumdolorsitamet,teperfeugiattractatos?Sedeinonumesdeseruntadipiscing,atviditrequevis,inlibriseruditiaccumsanvix.Atduoprimaludusquidam,congueprimiscueum,habeoocurreretcumex?Eiposteaerudititinciduntpri,quoutmaiestatisquaerendum,eumloremiriurereprimiqueeu.Loremipsumdolorsitamet,teperfeugiattractatos?Sedeinonumesdeseruntadipiscing,atviditrequevis,inlibriseruditiaccumsanvix.Atduoprimaludusquidam,congueprimiscueum,habeoocurreretcumex?Eiposteaerudititinciduntpri,quoutmaiestatisquaerendum,eumloremiriurereprimiqueeu.Loremipsumdolorsitamet,teperfeugiattractatos?Sedeinonumesdeseruntadipiscing,atviditrequevis,inlibriseruditiaccumsanvix.Atduoprimaludusquidam,congueprimiscueum,habeoocurreretcumex?Eiposteaerudititinciduntpri,quoutmaiestatisquaerendum,eumloremiriurereprimiqueeu.Loremipsumdolorsitamet,teperfeugiattractatos?Sedeinonumesdeseruntadipiscing,atviditrequevis,inlibriseruditiaccumsanvix.Atduoprimaludusquidam,congueprimiscueum,habeoocurreretcumex?Eiposteaerudititinciduntpri,quoutmaiestatisquaerendum,eumloremiriurereprimiqueeu.Loremipsumdolorsitamet,teperfeugiattractatos?Sedeinonumesdeseruntadipiscing,atviditrequevis,inlibriseruditiaccumsanvix.Atduoprimaludusquidam,congueprimiscueum,habeoocurreretcumex?Eiposteaerudititinciduntpri,quoutmaiestatisquaerendum,eumloremiriurereprimiqueeu. </div>
solution3
1 2018-04-14 12:47:02
It looks like your text is a made of very long strings that have no spaces. You can fix the wrapping with a css property word-break eg:
<head> ... <style> p { word-break: break-word; } </style> ... </head>
You could try 'break-all' if 'break-word' won't work.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.