Question

这似乎是一个我可能过度思考的简单问题。

我有一个使用CSS很好地缩小的页面，但是我需要阻止它在360px的宽度下包装文本。这样做的想法是在宽度为360px的情况下使用相同比例的页面，但在某种意义上使用视口“缩小”。使用视口元标记来设置这会导致320px宽手机（iPhone 5）出现问题：

<meta name="viewport" content="width=device-width, min-width=360px, initial-scale=1.0"/>

我这样做是为了在此页面的实际html和body标签上设置最小宽度，但宽度为360px的内容现在要求您侧向滚动以查看整个页面，或者捏合和缩放进行。

 html, body {
  width: 100%;
  min-width: 360px;
 }

对此有简单的答案吗？

Answer 1

您可以将框的字体大小设置为基于百分比的值，以便它与页面的其余部分一起缩小，如果该元素阻止它缩小。

Answer 2

您可以使用white-space: nowrap;阻止文字换行。

body {
  white-space: nowrap;
}

p {
  width: 200px;
  border: 1px solid pink;
}

<p>
  Text text text text text text text text text text text text text text text text text text text text text.
</p>

如果在white-space上使用<body>过多的文本，您可以创建一个实用程序类并根据需要应用于元素。

.text-nowrap {
  white-space: nowrap;
}