Html 内容框大小更改时是否换行div？

我有一个根据来源改变大小的内容框

下面有一个标题和信息div，它以水平内联方式显示

如果内容框很大，这看起来很好，但是如果很小，标题和信息会过度扩展

当内容框小于标题/信息宽度时，如何获取要堆叠的标题和信息

但对于分辨率介质查询，浏览器大小保持不变，只有长方体更改大小

大型（良好）

小（过度扩展）

小叠层（外观要求）

HTML

<div class="container">

  <div class="content">content</div>

  <div class="info">
    <div class="title">Title Title Title</div>
    <div class="description">info info info info info info info info info</div>
  </div>

</div>

---

不确定您是否在寻找纯HTML/CSS解决方案，但我编写的这个简单的jQuery脚本可能会有所帮助

$(".container").find(function() {
  var contentWidth = $(".content").outerWidth();
  var infoWidth = $(".info").outerWidth();
  if (contentWidth < infoWidth){
    $(".description").css('display', 'block');
  }
});

$（“.container”）.find（函数（）{
var contentWidth=$（“.content”）.outerWidth（）；
var infoWidth=$（“.info”）.outerWidth（）；
if（contentWidth

效果很好，我可能会用它。在接受之前，让我看看其他人是否有任何css答案。

$(".container").find(function() {
  var contentWidth = $(".content").outerWidth();
  var infoWidth = $(".info").outerWidth();
  if (contentWidth < infoWidth){
    $(".description").css('display', 'block');
  }
});