html - 圈子div中的文字溢出

我有一个圆div，我的文本不在里面。默认情况下，它略高于，我无法确定原因。我在顶部添加了边距以将其强制放入div中，但我确信有更好的方法可以这样做，因为我的方法只适用于一定数量的文本。

div.description {
display: inline-block;
position: relative;
margin-top: 250px;
width: 500px;
height: 500px;
border-radius: 50%;
background-color: #caebf2;
white-space: pre-line;
text-align: center;
}

<div class="description">
<h1>Title</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas libero orci,
viverra vel neque sed, elementum molestie sem. Sed in est id metus pharetra
interdum. Donec cursus diam sit amet est elementum volutpat. Nam suscipit eget
leo at porttitor. Curabitur auctor ullamcorper leo. Aenean sollicitudin justo
in elementum suscipit. Suspendisse potenti. Vestibulum vitae commodo tellus,
in imperdiet ante. In luctus nec leo sed vulputate. Proin bibendum ipsum urna,
a ornare ex blandit a.
</p>
</div>

这就是它的样子

但我希望它看起来更像这样，但不必在div中的文本顶部添加边距。

最佳答案

这里有一个版本，允许里面有任何大小的文本，当然，如果内容的大小要大得多，那么周围<div>的大小就必须改变。我在第二个例子中添加了更多的文本。

div.description {
display: inline-block;
position: relative;
margin-top: 250px;
width: 500px;
height: 500px;
border-radius: 50%;
background-color: #caebf2;
white-space: pre-line;
text-align: justify;
  text-align-last: center;
  position: relative;
}
div.description h1 {
  margin: 0;
  padding: 0;
}
div.description p {
  padding: 3.5em;
  position: absolute;
  top: 50%;
  max-width: 470px;
  max-height: 470px;
  transform: translate(0,-50%);
}

<div class="description">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas libero orci, viverra vel neque sed, elementum molestie sem. Sed in est id metus pharetra interdum. Donec cursus diam sit amet est elementum volutpat. Nam suscipit eget leo at porttitor. Curabitur auctor ullamcorper leo. Aenean sollicitudin justo in elementum suscipit. Suspendisse potenti. Vestibulum vitae commodo tellus, in imperdiet ante. In luctus nec leo sed vulputate. Proin bibendum ipsum urna, a ornare ex blandit a.</p>
</div>
<div class="description">
<h1>Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas libero orci, viverra vel neque sed, elementum molestie sem. Sed in est id metus pharetra interdum. Donec cursus diam sit amet est elementum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas libero orci, viverra vel neque sed, elementum molestie sem. Sed in est id metus pharetra interdum. Donec cursus diam sit amet est elementum volutpat. Nam suscipit eget leo at porttitor. Curabitur auctor ullamcorper leo. Aenean sollicitudin justo in elementum suscipit. Suspendisse potenti. Vestibulum vitae commodo tellus, in imperdiet ante. In luctus nec leo sed vulputate. Proin bibendum ipsum urna, a ornare ex blandit a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas libero orci, viverra vel neque sed, elementum molestie sem. Sed in est id metus pharetra interdum. Donec cursus diam sit amet est elementum volutpat.</p>
</div>

关于html - 圈子div中的文字溢出，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40624527/