[分享]css内容溢出隐藏的代码

CSS的内容溢出隐藏可以帮助我们避免内容因为尺寸不够而无法正常显示的问题，同时保证网页的美观性。要实现溢出隐藏，我们可以借助CSS的overflow属性实现。该属性有4个可选值：overflow: v...

CSS的内容溢出隐藏可以帮助我们避免内容因为尺寸不够而无法正常显示的问题，同时保证网页的美观性。

要实现溢出隐藏，我们可以借助CSS的overflow属性实现。该属性有4个可选值：

overflow: visible;  /*默认值，内容不会被裁剪，会溢出父容器*/
overflow: hidden;   /*超出的内容会被裁剪掉，不会显示*/
overflow: scroll;   /*自动添加滚动条，即使内容未超出尺寸也会显示滚动条*/
overflow: auto;     /*和scroll很像，只不过只有内容超出尺寸才会添加滚动条*/ 

代码演示：

<div class="box">
  <p class="text">内容可能会溢出的文字内容</p>
</div> 

.box {
  width: 200px;
  height: 100px;
  border: 1px solid #ccc;
  overflow: hidden;
}

.text {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
} 

以上代码在一个200px * 100px的盒子内部，展示了一段可能会溢出的文字内容。通过设置overflow属性为hidden，我们可以让超出盒子的内容不会被显示。此外，为了防止文字自动换行影响布局，我们还可以借助white-space属性设置为nowrap来禁止自动换行，同时使用text-overflow: ellipsis来在文字超出尺寸时省略部分内容并用省略号代替，增加页面美观度。