什么是当一个元素的内容可能比分配给它的空间更大时？
当网页的内容超过了容器所设置的宽度或高度时，网页就会出现滚动条来显示超出部分的内容。但是，有时候我们并不想出现滚动条，而是希望能够让超出部分自动调整大小，以适应容器的大小。这就需要解决当一个元素的内容可能比分配给它的空间更大时的问题。
怎样解决当一个元素的内容可能比分配给它的空间更大时的问题？
使用CSS属性max-width
使用CSS属性max-width可以解决当一个元素的内容可能比分配给它的空间更大时的问题。该属性可以将一个元素的最大宽度限制为指定的值，超出部分将会被自动调整大小。下面是一个使用了max-width属性的例子：
.container {
max-width: 500px;
}
上面的代码将一个容器的最大宽度定为500像素。如果该容器中的内容超过了500像素，超出部分会自动调整大小以适应容器的大小。
使用CSS属性overflow
使用CSS属性overflow也可以解决当一个元素的内容可能比分配给它的空间更大时的问题。该属性可以控制一个容器中内容超出部分的显示方式。下面是overflow属性的几个常用取值：
visible：默认值，超出部分会显示在容器外
hidden：超出部分会被隐藏，不会显示在容器外
scroll：会出现滚动条来显示超出部分
auto：如果内容超出容器大小，会出现滚动条；否则不会出现滚动条
下面是一个使用了overflow属性的例子：
.container {
overflow: hidden;
}
上面的代码将一个容器的overflow属性设置为hidden，超出部分会被隐藏。
使用CSS属性word-wrap
使用CSS属性word-wrap可以解决当一个元素中的一个单词太长，超出容器的大小，导致容器无法自适应大小的问题。该属性可以指定是否允许单词自动换行。下面是一个使用了word-wrap属性的例子：
.container {
word-wrap: break-word;
}
上面的代码将一个容器的word-wrap属性设置为break-word，即当一个单词太长，不能完整显示在一行时，会将单词自动换行。
总结
当一个元素的内容可能比分配给它的空间更大时，我们可以使用CSS属性max-width、overflow和word-wrap来解决该问题。max-width可以将一个元素的最大宽度限制为指定的值，超出部分会被自动调整大小；overflow可以控制一个容器中内容超出部分的显示方式；word-wrap可以指定是否允许单词自动换行。