纯CSS让子元素突破父元素的宽度限制

要让子元素在宽度方面突破父元素的限制，可以使用CSS中的position属性，配合left和right属性进行调整。

下面是具体的方法：

1. 将父元素设置为relative定位，并设置宽度。

2. 在子元素中，设置为absolute定位，再设置left: 0和right: 0。

这将使子元素在宽度方面超越父元素，并成为父元素的一个外延。

下面是一个示例：

<div class="wrapper">
  <div class="content">
    <p>这是一个段落，将会超出父元素的宽度限制。</p>
  </div>
</div>

.wrapper {
  position: relative;
  width: 200px;
  height: 100px;
  background-color: red;
  overflow: hidden;
}

.content {
  position: absolute;
  left: 0;
  right: 0;
  background-color: blue;
  padding: 10px;
}

p {
  color: white;
  margin: 0;
}

在上面的代码中，我们设置了一个红色的容器，并将其宽度限制为200px。在容器中，我们放置了一个蓝色的子元素，在子元素中，使用了absolute定位和left/right属性来突破了父元素的宽度限制。

另一个示例：

<div class="wrapper">
  <div class="content">
    <img src="image.jpg" alt="这是一个图片，将会超出父元素的宽度限制。">
  </div>
</div>

.wrapper {
  position: relative;
  width: 200px;
  height: 100px;
  background: red;
  overflow: hidden;
}

.content {
  position: absolute;
  left: 0;
  right: 0;
}

img {
  width: 100%;
}

在这个例子中，我们使用了相同的方法来让一个图像突破父元素的宽度限制。我们设置了一个红色的容器和一个蓝色的子元素，并在子元素中放置了一个图像。使用absolute定位和left/right属性来让图像完全覆盖了父元素，然后使用宽度100%来填充子元素。