如何让文本内容容纳在圆形父div内？

问题核心：圆形容器的曲线边缘基于容器外框，但文本默认占满容器水平宽度，导致左右两端超出圆形曲线。要让文本完全留在圆形内，需限制文本最大宽度为圆形的内接正方形宽度，同时保持文本居中对齐。

修改后代码 #

CSS 代码 #

.content_container {
  /* 可选：设置固定宽度，确保圆形为正圆 */
  width: 400px;
  margin: 0 auto;
}

.content_unit {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: solid 5px cyan;
  padding: 30px;
  border-radius: 50%;
  /* 强制容器为正方形，保证border-radius:50%生成正圆 */
  aspect-ratio: 1/1;
  /* 盒模型包含padding和border，简化尺寸计算 */
  box-sizing: border-box;
}

.content_image {
  width: 100px;
  aspect-ratio: 1/1;
  background: orange;
  border-radius: 50%;
  margin-bottom: 30px;
  border: solid 3px olivedrab;
}

.content_heading {
  font-size: 26px;
  color: black;
  margin-bottom: 20px;
  /* 限制标题最大宽度为内接正方形宽度（≈70.7%容器宽度） */
  max-width: 70.7%;
}

.content_content {
  font-size: 18px;
  color: black;
  /* 限制正文最大宽度为内接正方形宽度 */
  max-width: 70.7%;
}

HTML 代码（无需修改） #

<div class="content_container">
  <div class="content_unit">
    <div class="content_image"></div>
    <p class="content_heading">Awesome Heading</p>
    <p class="content_content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur molestie nunc enim. Integer at elementum augue. In fringilla lectus non nisl suscipit scelerisque. Duis a tellus sit amet diam semper feugiat nec</p>
  </div>
</div>

原理说明 #

• aspect-ratio:1/1 强制容器为正方形，确保border-radius:50%生成标准正圆。
• box-sizing:border-box 让容器宽高包含padding和border，避免额外尺寸导致圆形变形。
• max-width:70.7% 对应圆形内接正方形的边长比例（正方形边长=圆形直径/√2≈0.707×直径），文本限制在此宽度内，左右两端不会超出圆形曲线边缘，同时保持居中对齐。

内容的提问来源于stack exchange，提问作者Mohiuddin Hasan