[分享]css元素溢出三件套

CSS元素溢出三件套是CSS中常用的超出容器范围的处理方式，主要包括overflow，text-overflow和white-space。下面一一介绍：

/* 设置overflow属性 */
.box {
  width: 200px;
  height: 120px;
  overflow: hidden; /* 内容超出隐藏 */
  /* overflow: scroll; 内容超出滚动 */
  /* overflow: auto; 内容超出显示滚动条 */
}

/* 设置text-overflow属性 */
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 设置white-space属性 */
.wrap {
  white-space: normal; /* 默认值，文本换行 */
  /* white-space: nowrap; 文本不换行 */
  /* white-space: pre; 文本保持原格式，空格和回车生效 */
  /* white-space: pre-wrap; 文本保持原格式，可换行 */
} 

overflow用于控制容器内容溢出的处理方式，可以设置为隐藏、滚动和自动出现滚动条。如果想要隐藏整个溢出内容，可以使用overflow: hidden;；如果想要出现滚动条，可以使用overflow: auto;。

text-overflow用于控制文字超出容器时的处理方式，例如可以截断文字并用省略号代替。可以将text-overflow设置为ellipsis，如text-overflow: ellipsis;。

white-space用于控制文本的换行和空格处理方式，例如可以保持文本原格式或者将文本强制在一行显示。可以使用white-space: pre;来保持文本原格式，换行和空格都会生效。

以上三种属性经常组合使用，可以根据实际情况选择适合的组合方式。以上为简单介绍，如需了解更多可以查阅相关资料。