Question

我正在阅读一份文字文件，并将其打印在我的网页上，但文字一直向右，我不想一直向右滚动

。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <p>
        {{text}}</p>
    </body>
</html>

我不想向右滚动，我只想向下滚动并查看整个文本。我无法找到一种方法来做到这一点

Answer 1

您需要添加word-wrap css

p { 
  word-wrap: break-word;
}

Answer 2

您可以尝试设置div的样式以确保文本包装

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>

Answer 3

看起来你的文字是由很长的字符串构成的，没有空格。您可以使用css属性word-break修复包装，例如：

<head>
...
<style>
 p {
  word-break: break-word;
}
</style>
...
</head>

如果'break-word'不起作用，你可以试试'break-all'。

HTML文本一直向右扩展

3 个答案: