如何为HTML div设置固定尺寸并实现文本超出自动换行？

要实现固定div尺寸且文本超出自动换行的效果，你需要对现有CSS做以下修改：

1. 固定容器宽度并消除子元素间隙 #

给.label添加固定宽度（可按需调整），同时消除inline-block子元素之间的默认空格间隙：

.label {
  margin-bottom: 96px;
  width: 200px; /* 自定义固定宽度，比如200px，可根据需求修改 */
  font-size: 0; /* 消除inline-block子元素间的空格间隙 */
}

2. 调整左侧/右侧装饰元素的高度自适应 #

将.left和.right的固定高度改为100%，并让背景图片垂直居中，确保它们的高度能跟随中间文本区域自动变化：

.label .left {
  background: url("https://t1.daumcdn.net/localimg/localimages/07/2011/map/storeview/tip_l.png") no-repeat center left;
  display: inline-block;
  height: 100%; /* 自适应父容器高度 */
  overflow: hidden;
  vertical-align: top;
  width: 7px;
}

.label .right {
  background: url("https://t1.daumcdn.net/localimg/localimages/07/2011/map/storeview/tip_r.png") no-repeat center right;
  display: inline-block;
  height: 100%; /* 自适应父容器高度 */
  overflow: hidden;
  width: 6px;
}

3. 修改中间文本区域实现自动换行 #

移除.center的固定高度，设置自适应宽度、换行规则，并调整行间距和内边距，让文本在超出宽度时自动换行：

.label .center {
  background: url(https://t1.daumcdn.net/localimg/localimages/07/2011/map/storeview/tip_bg.png) repeat; /* 让背景图适配高度变化 */
  display: inline-block;
  font-size: 12px; /* 恢复字体大小 */
  line-height: 1.4; /* 调整行间距，适配多行文本 */
  min-height: 24px; /* 保持最小高度与原设计一致 */
  padding: 2px 8px; /* 增加内边距，避免文本贴边 */
  vertical-align: top;
  width: calc(100% - 13px); /* 减去左右元素宽度总和（7px+6px=13px） */
  word-wrap: break-word; /* 强制长单词换行 */
  white-space: pre-wrap; /* 保留文本换行并自动换行 */
}

完整修改后的CSS代码 #

<style>
  .label {
    margin-bottom: 96px;
    width: 200px; /* 自定义固定宽度，可调整 */
    font-size: 0; /* 消除inline-block子元素间的空格间隙 */
  }
  .label * {
    display: inline-block;
    vertical-align: top;
  }
  .label .left {
    background: url("https://t1.daumcdn.net/localimg/localimages/07/2011/map/storeview/tip_l.png") no-repeat center left;
    display: inline-block;
    height: 100%;
    overflow: hidden;
    vertical-align: top;
    width: 7px;
  }
  .label .center {
    background: url(https://t1.daumcdn.net/localimg/localimages/07/2011/map/storeview/tip_bg.png) repeat;
    display: inline-block;
    font-size: 12px;
    line-height: 1.4;
    min-height: 24px;
    padding: 2px 8px;
    vertical-align: top;
    width: calc(100% - 13px);
    word-wrap: break-word;
    white-space: pre-wrap;
  }
  .label .right {
    background: url("https://t1.daumcdn.net/localimg/localimages/07/2011/map/storeview/tip_r.png") no-repeat center right;
    display: inline-block;
    height: 100%;
    overflow: hidden;
    width: 6px;
  }
</style>

关键修改说明 #

• 固定.label的宽度，确保容器尺寸稳定
• 让左右装饰元素高度自适应，避免文本换行后装饰条高度不足
• 移除中间区域的固定高度，添加换行规则，同时通过内边距和行间距优化多行文本的可读性

内容的提问来源于stack exchange，提问作者데이지