当一个元素的内容超出了它所设置的宽度，可以通过CSS中的overflow属性来控制元素的显示方式。该属性有三种可选值：
overflow: visible; // 默认值，内容溢出元素边界显示 overflow: hidden; // 内容溢出元素边界不显示，相当于裁剪 overflow: scroll; // 内容溢出元素边界时显示滚动条
例如，大家有一个DIV元素，宽度为300px，里面有一张宽度为400px的图片：
<div> <img src="example.jpg" /> </div>
此时，图片的宽度超过了DIV元素的宽度，导致图片被挤压变形。为了解决这个问题，大家可以在CSS中添加超出宽度设置：
div {
width: 300px;
overflow: hidden; // 超出宽度隐藏
}
img {
width: 400px;
}这样，当图片的宽度超过了DIV元素的宽度时，图片就不再超出边界，而是被隐藏在元素内部，避免了变形问题。
除了以上三种基本设置之外，overflow属性还有两个可选值：auto和inherit。auto表示自动根据内容的大小进行显示或滚动条显示；inherit表示继承父元素的overflow属性。
超出宽度的设置在网页设计中是非常常用的，它可以有效地控制页面元素的布局和显示效果。合理地使用超出宽度设置可以让网页达到更好的效果和用户体验。