我有这个代码
<!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>