[分享]css只能怪溢出和隐藏

在前端开发中，我们时常需要对某些元素进行大小限制，有时候元素的内容会超出元素本身的大小范围，这时候就需要对元素进行溢出处理。在CSS中，我们可以通过“overflow”属性来实现元素的溢出处理，常见的...

在前端开发中，我们时常需要对某些元素进行大小限制，有时候元素的内容会超出元素本身的大小范围，这时候就需要对元素进行溢出处理。在CSS中，我们可以通过“overflow”属性来实现元素的溢出处理，常见的取值有“visible”、“hidden”、“scroll”、“auto”等。

例如：

// 隐藏溢出的内容
div{
  width: 200px;
  height: 100px;
  overflow: hidden;
}

// 显示滚动条
div{
  width: 200px;
  height: 100px;
  overflow: scroll;
} 

然而，在实际开发中，我们会发现有时候“overflow”属性无法实现我们希望的效果。比如，当父元素的大小和子元素的大小相同，子元素溢出的内容就无法被隐藏，当父元素是不定宽高的时候，用“overflow”属性也很难处理溢出的内容。

这时候，我们就需要使用CSS的“clip”属性和“text-overflow”属性来实现溢出内容的处理。clip属性可以裁剪元素的内容，而text-overflow属性可以控制文本的截断和省略方式。

例如：

// 隐藏超出范围的内容
div{
  width: 200px;
  height: 100px;
  position: relative;
}
div span{
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 200px;
  height: 100px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

// 在超出范围的文本后面添加省略号
div{
  width: 200px;
  height: 100px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
} 

总的来说，对于元素溢出的处理，我们需要灵活运用CSS的各种属性来实现所需效果。在实际开发中，我们需要根据具体情况来选择合适的处理方式，保证页面效果的完美展示。