在JavaScript / HTML中，div容器在内容过多时不显示超出的部分

Never_Satisfied2025-10-15 12:00

可以通过 CSS 的 overflow 属性来控制超出容器尺寸的内容显示方式。要使超出尺寸的内容不显示，只需要为对应容器设置：

html 复制代码

<div style="width: 300px; height: 200px; overflow: hidden;">
  <!-- 你的内容 -->
</div>

关键属性解释：

overflow: hidden 👉 直接隐藏超出容器的内容
overflow: auto 👉 自动按需显示滚动条（仅当内容溢出时）
overflow: scroll 👉 强制显示滚动条（无论内容是否溢出）

进阶技巧（处理文字溢出）：

css 复制代码

.truncate-text {
  white-space: nowrap;         /* 禁止文字换行 */
  overflow: hidden;            /* 隐藏溢出内容 */
  text-overflow: ellipsis;     /* 用省略号显示被截断文字 */
}

（适用于单行文本截断，需配合固定宽度使用）

多行文本截断方案：

css 复制代码

.multiline-ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 3;       /* 显示行数 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

（兼容现代浏览器，适用于多行文本截断）