HTML文本一直向右扩展
[英]HTML text expanding all the way to right
问题描述
我正在阅读一个文本文档并将其打印在我的网页中，但是文本一直一直向右滚动，我不想一直向右滚动
。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>
{{text}}</p>
</body>
</html>
我不想向右滚动，而只想向下滚动并查看整个文本。 我找不到办法
3 个解决方案
解决方案1
1 已采纳 2018-04-14 12:44:33
您需要添加word-wrap CSS
p {
word-wrap: break-word;
}
解决方案2
1 2018-04-14 12:46:39
您可以尝试设置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>
解决方案3
1 2018-04-14 12:47:02
看起来您的文字是由非常长的字符串组成，没有空格。 您可以使用CSS属性断字来修复包装，例如：
<head> ... <style> p { word-break: break-word; } </style> ... </head>
如果“断词”不起作用，您可以尝试“全部破解”。
在输入字符时扩展输入类型文本的更优雅的方法
[英]More elegant way of expanding an input type text as characters are inputted
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.