Je lis un document texte et je l'imprime dans ma page Web mais le texte va à droite et je ne veux pas faire défiler à droite
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>
{{text}}</p>
</body>
</html>
Je ne veux pas faire défiler vers la droite et je veux juste faire défiler vers le bas et voir tout le texte. Et je ne peux pas trouver un moyen de le faire
3 réponses
Vous devez ajouter word-wrap
css
p {
word-wrap: break-word;
}
Il semble que votre texte soit composé de très longues chaînes sans espaces. Vous pouvez corriger l'habillage avec un saut de mot de propriété CSS, par exemple:
<head>
...
<style>
p {
word-break: break-word;
}
</style>
...
</head>
Vous pouvez essayer «break-all» si «break-word» ne fonctionne pas.
Vous pouvez essayer de styliser votre div pour vous assurer que le texte s’enveloppe
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>
Questions connexes
De nouvelles questions
javascript
Pour des questions concernant la programmation dans ECMAScript (JavaScript / JS) et ses divers dialectes / implémentations (hors ActionScript). Veuillez inclure toutes les balises pertinentes dans votre question; par exemple, [node.js], [jquery], [json], etc.