如何固定div的尺寸但保持响应式

Question

如何固定div的尺寸但保持响应式

htmlcsslistresponsive-designresponsive

3

我想创建一个包含信息的容器（一个盒子），我想固定其大小，但同时又希望能够响应式地展示。看一下这张图片，就能更好地理解我的意思：

所以允许这样做：

同样，目前这种情况也可以：

但是错误的尝试会导致它被阻塞在一个大小上：

我尝试了以下代码：

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

- Jerome

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- kukkuz · Accepted Answer

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