如何在html文本标记pre中自动换行



我有这个代码

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<title>any</title>
</head>
<body>
<pre style="width: 150px; white-space:pre-wrap; word-wrap:break-word;">
word1 word2
mean1 mean2
</pre>
</body>
</html>

当我有一个小型设备时,HTML换行显示类似于的内容

word1
word2
mean1
mean2

我期待类似的东西

word1
mean1
word2
mean2

但我不能改变标签pre内单词的顺序,因为当我有一个更大的设备时,行为是可以的。

这是正常的行为,如果你想重新排序,你需要使用媒体查询重新调整你的css,甚至为这种情况制作第二个html。

请参阅以获取我的替代解决方案。

pre {
white-space: pre-wrap; 
word-wrap: break-word;
}
pre{
width:50px;
}
div{
display: flex;
flex-wrap: wrap;
}
.mobile{
width:50px;
}
<pre>
word1 word2
mean1 mean2
</pre>
<div>
<pre>
word1
mean1 
</pre>
<pre>
word2
mean2
</pre>
</div>
<div class="mobile">
<pre>
word1
mean1 
</pre>
<pre>
word2
mean2
</pre>
</div>

最新更新