CSS让成都小程序设计可以精确控制您的内容在网页上的显示方式。一个CSS属性溢出是前端程序员需要知道的关键，因为如果在某些情况下不加以检查，它可能会导致您的内容看起来凌乱甚至不可读。
无论您使用的是纯CSS还是像Bootstrap这样的框架，您都需要了解以下内容。
在CSS中，当元素的内容不能完全容纳在元素框内时，就会发生溢出。当元素的指定高度对于它包含的内容来说太小时，就会发生这种情况。您可以使用CSS溢出属性来控制溢出发生的情况。
在查看溢出属性之前，让我们先澄清一下“元素框”的含义。根CSS盒子模型，为HTML元素生成一个盒子。这个框包含四层：内容本身、填充、边框和边距。
当HTML元素的内容超出框的任何边缘时——无论是内容边缘、填充边缘、边框边缘还是边距边缘——它被称为溢出。
CSSoverflow属性有几种控制溢出的方法。让我们仔细看看它的值。
可见意味着溢出的内容不会被裁剪。相反，它将呈现在元素的框外，并可能与页面上的其他元素重叠。这是溢出属性的默认值。
为防止溢出在元素框外呈现，您可以将溢出属性设置为隐藏。这将在框的填充边缘剪切内容。此外，它不允许用户通过滚动查看填充边缘以外的内容。
请注意，此值仍然允许编程滚动，这意味着该框在技术上是一个滚动容器。例如，用户可以使用CSSOM View Module定义的机制来查看隐藏的内容。
要在允许用户查看内容的同时隐藏元素框外的溢出，请将溢出属性设置为“滚动”。溢出仍将在框的填充边缘处被剪裁。但是，添加了一个滚动条，以便用户可以滚动查看当前不可见的内容。
“auto”值类似于滚动，但仅当框溢出时才添加滚动条。
在下面的示例中，两个div都定义了自动溢出值，但只有第二个div具有可滚动溢出和滚动条。
您可以使用overflow-x和overflow-y属性来控制水平和垂直溢出，而不是使用溢出。
overflow-x属性控制水平溢出——换句话说，从元素框的左侧和右侧溢出。
在此示例中，overflow-x设置为滚动，因此您可以从左向右滚动以查看图像。但是overflow-y设置为隐藏，所以你不能上下滚动。
overflow-y属性控制垂直溢出，即从元素框的顶部和底部溢出。
本例中overflow-y设置为scroll，overflow-x这次设置为hidden。
您还可以使用简写overflow属性，而不是同时定义overflow-x和overflow-y属性。如果指定了两个值，第一个代表overflow-x的值，第二个代表overflow-y的值
如果只有一个值，则它适用于overflow-x和overflow-y属性。例如，如果我用overflow: scroll; 定义了包含图像的 div；然后图像可以水平和垂直滚动。
CSSoverflow-wrap属性指定浏览器将一行文本分成多行的情况。如果没有此属性，太长而无法放入行框的文本字符串将无法断开并导致溢出。
要使用溢出换行，空白属性必须允许换行。这意味着必须将white-space属性设置为“normal”、“pre-wrap”和“break-spaces”或“pre-line”。大多数情况下，您会看到它设置为“正常”。
overflow-wrap属性可以采用三个值：normal、anywhere或break-word。
当overflow-wrap设置为normal时，一行文本只会在非强制断点处断行，例如两个单词之间的空格。
当应用任意值时，如果没有非强制断点，行可能会在强制断点处断。
例如，一个长词或URL可能会被打断换行。断点处不插入连字符。
使用此值，在计算最小内容固有大小（框在不导致溢出的情况下可以采用的最小大小）时，会考虑通过在断点处换行来最小化溢出一行的内容量的机会。
如果使用break-word值，则在没有非强制断点的情况下，行可能会在强制断点处中断。断点处不插入连字符。
但是，在计算最小内容固有大小时（换句话说，一个框在不导致溢出的情况下可以采用的最小大小）不会考虑通过在断点换行来最小化溢出一行的内容量的机会。
CSS text-overflow属性控制溢出其容器元素的内联内容如何在页面上呈现。
要使用CSS text-overflow属性，块容器元素必须由具有visible以外值的overflow属性定义。大多数情况下，它将被定义为“溢出：隐藏”。容器还必须由white-space属性定义并设置为“nowrap”。否则，内联内容将换行到下一行，而不是剪裁。
有两个CSS text-overflow属性值，clip和ellipsis。
将CSS text-overflow属性设置为“clip”将在填充边缘剪切溢出其块容器元素的内联内容。访问者将无法看到超出裁剪边缘的内容。
这类似于CSS溢出属性的“隐藏”值。不同之处在于剪辑禁止任何类型的滚动，包括程序化滚动。这意味着元素的框不是滚动容器。
使用省略号值将在填充边缘剪切溢出其块容器元素的内联内容，并多出一点以适应省略号。
他的值还禁止任何滚动，包括编程滚动，它告诉浏览器元素的框不是滚动容器。访问者将无法看到超出裁剪边缘的内容。
溢出是一个常见问题，您可能会遇到从头开始创建布局或自定义预先设计的布局的情况。了解如何控制它将确保您可以在不影响对齐或定位的情况下创建和自定义布局。值得庆幸的是，您只需要一些基本的网页设计知识即可。
综上所述，成都小程序设计中让CSS溢出工作的关键是通过合理设置盒模型、溢出属性和伪元素等方法来控制内容的表现和处理。通过这些技巧和技术手段的应用，我们可以实现更灵活、美观和易用的网页设计效果。
