css 超出...

作者：至尊巅峰发布日期:2026-08-03 浏览:35

/* 示例代码：当文本超出容器宽度时隐藏溢出部分 */

.container {
  width: 200px; /* 设置容器的宽度 */
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏超出容器的内容 */
  text-overflow: ellipsis; /* 用省略号表示被隐藏的文本 */
}

/* 示例代码：当内容超出容器高度时显示滚动条 */

.scrollable-container {
  height: 150px; /* 设置容器的高度 */
  overflow-y: auto; /* 当内容超出容器高度时显示垂直滚动条 */
}

解释说明：

隐藏溢出文本：
- white-space: nowrap;：防止文本换行，确保所有文本都在同一行。
- overflow: hidden;：隐藏超出容器宽度的部分。
- text-overflow: ellipsis;：用省略号（...）来表示被隐藏的文本。
显示滚动条：
- overflow-y: auto;：当内容超出容器的高度时，自动显示垂直滚动条，用户可以通过滚动查看所有内容。

上一篇：css3 动画

下一篇：css的作用