CSS 将DIV缩小到文本被包裹到其最大宽度

在本文中，我们将介绍如何使用CSS将一个DIV元素缩小到文本被包裹到其最大宽度。通常情况下，DIV元素的宽度会自动扩展以适应其中的文本内容。然而，有时候我们希望将DIV元素的宽度限制在一个特定的最大值，并且当文本超出这个最大宽度时，将其包裹到下一行。下面我们将通过示例说明如何实现这个效果。

首先，让我们创建一个HTML文件，并在其中包含一个DIV元素和一些文本内容。我们将为这个DIV元素定义一个最大宽度，并使文本内容超过这个宽度。接下来，我们将使用CSS将DIV元素缩小到文本被包裹到其最大宽度。

<!DOCTYPE html>
<html>
<head>
  <style>
    .wrapper {
      max-width: 300px;
      border: 1px solid black;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="wrapper">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis rhoncus faucibus. Pellentesque nec scelerisque sapien. Sed pharetra aliquet pretium. Nullam tincidunt nisl a enim tincidunt tincidunt. Morbi fringilla ipsum vehicula placerat ultrices. Maecenas ac mauris elit. Quisque nulla justo, molestie in sodales id, aliquet eu ante.
  </div>
</body>
</html>

在上述示例中，我们创建了一个名为”wrapper”的类，并为该类的元素定义了最大宽度、边框和内边距。我们使用的最大宽度是300像素。接下来，我们在DIV元素内添加了一段长文本，这段文本将超过我们定义的最大宽度。

运行上述示例代码，我们可以看到DIV元素的宽度已经被限制在300像素的最大宽度内。文本超出这个宽度时，会被自动包裹到下一行显示。这样，我们就成功地将DIV缩小到文本被包裹到其最大宽度了。

除了使用固定的最大宽度，我们还可以使用百分比来定义DIV元素的最大宽度。在下面的示例中，我们将把最大宽度设为父元素宽度的80%。

<!DOCTYPE html>
<html>
<head>
  <style>
    .parent {
      width: 600px;
    }

    .wrapper {
      max-width: 80%;
      border: 1px solid black;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="wrapper">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
  </div>
</body>
</html>

在上述示例中，我们创建了一个名为”parent”的类，并为该类的元素定义了一个宽度为600像素。接下来，我们在该父元素内创建了一个包含文本的DIV元素，并为其定义了最大宽度为父元素宽度的80%。

运行上述示例代码，我们可以看到内部的DIV元素的宽度被限制在父元素宽度的80%内。这样，即使父元素的宽度发生变化，我们的DIV元素始终保持在这个相对宽度范围内。

阅读更多：CSS 教程