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

Posted 2023-03-06

【中文标题】如何修复 div 的大小但保持响应

【英文标题】：How to fix the size of a div but keep it responsive

【发布时间】：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>

【参考方案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 分钟才能将您的答案标记为真）