如何修复div的大小但保持响应

Question

我试图制作一个包含信息的容器（盒子），我想修改它的大小，但我想让它响应。看一下这张图片就可以更好地理解我想要做的事情：

允许这样做： 现在一样，它还可以： 错了它应该阻止大小

我尝试了以下代码：

＆＃13;

＆＃13;

.liContainer {
  list-style-type: none;
  border-style: solid;
  margin-bottom: 5px;
}

＆＃13;

<li class="liContainer">
  <div>
    <h3>Container 1</h3>
  </div>
  <div id="id">
    <span>90b5bb870feb5a1148e4f9042f87c957043b71d60dc91d743bccdc5a10c0f54f </span>
  </div>
  <div>
    State:<span class="state">Running</span>
  </div>
</li>

＆＃13;

＆＃13;

＆＃13;

Answer 1

添加word-break:break-all - 这允许该行在任意两个字母之间断开

见下面的演示：

.liContainer {
  list-style-type: none;
  border-style: solid;
  margin-bottom: 5px;
  word-break: break-all;
}

<li class="liContainer">
  <div>
    <h3>Container 1</h3>
  </div>
  <div id="id">
    <span>90b5bb870feb5a1148e4f9042f87c957043b71d60dc91d743bccdc5a10c0f54f </span>
  </div>
  <div>
    State:<span class="state">Running</span>
  </div>
</li>