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

【问题标题】：How to fix the size of a div but keep it responsive如何修复 div 的大小但保持响应
【发布时间】：2017-05-27 14:13:36
【问题描述】：

我正在尝试制作一个包含信息的容器（一个盒子），我想修复大小，但我想让它响应。看这张图片可以更好地理解我想要做什么：

所以这是允许的：暂时一样，没关系：错误它应该阻止大小

我已经尝试了以下代码：

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

<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>

【问题讨论】：

标签： html css list responsive-design responsive

【解决方案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>

【讨论】：

正是我需要的！！太感谢了！（我需要等待 12 分钟才能将您的答案标记为真）