基于浏览器宽度的 DIV 静态宽度换行到新行答案

【问题标题】：DIV static width wrap to new line based on browser width基于浏览器宽度的 DIV 静态宽度换行到新行
【发布时间】：2021-06-05 05:10:45
【问题描述】：

我正在尝试创建一个具有静态宽度的 DIV。如果宽度超过浏览器宽度，则换行。我尝试了几种方法，每种组合都会在浏览器底部添加一个滚动条。

例如，如果我给 DIV 的大小为 2000x60，而浏览器是 1920，我尝试绘制 1920x60，然后将剩余的 80x60 像素换行到下一个新行。

下面添加了滚动条，我如何让它换行？

<html>
 <head>
  <style>
   #divTest{
   display:inline-block;
   width: 2000px;
   height: 60px;
   background-color: #00ffcc;
   }
  </style>
 </head>
<body>
    <div id="divTest">This is the div.</div>
</body>
</html>

所需的输出如下所示：

<html>
 <head>
  <style>
   #divTest{
    width: 1920px;
    height: 60px;
    background-color: #00ffcc;
   }
  #divTest2{
    width: 80px;
    height: 60px;
    background-color: #00ffcc;
   }
 </style>
</head>
<body>
    <div id="divTest">This is the div.</div>
    <br>
    <div id="divTest2">This is the remainder of the div with no scrollbars.</div>
</body>
</html>

但我想用一个动态 div 来实现这一点。

【问题讨论】：

标签： html css scrollbar newline

【解决方案1】：

不幸的是，我没有得到您真正想要编码的内容。

您可以使用 % 或 vw 代替 px 来使 div 动态化。

【讨论】：

如果你运行第一个块，你会看到 div 会跑出屏幕，在底部添加一个滚动条，因为宽度大于浏览器的宽度。第二个块显示了我想要的内容，它没有添加滚动条，而是包装了 div 并继续到下一行以获得宽度的剩余部分。我正在尝试通过包装无法容纳的额外内容来静态定义宽度，显示我可以显示的内容。如果我没有很好地描述它，我很抱歉。感谢您的关注，这有帮助吗？
现在我明白了。你可以用 JS 做到这一点。您需要一个在浏览器调整大小时执行并动态更改第二个 div 的函数。
很抱歉，我希望使用一个 div（第一块代码）来执行此操作。我想指定单个 div 的宽度，并在需要时适当地换行。如果我指定 500px 它不应该通过转到下一行来换行。如果我指定 2000px，它将放置 1920，并包装剩余的 80px。有没有这方面的 css 解决方案？
遗憾的是 CSS 无法做到这一点。