圈子div中的文字溢出 [英] Text overflow in circle div

问题描述

我有一个div圈子，但我的文字不在其中.默认情况下，它略高于该值，我无法查明原因.我已经在顶部添加了边距以将其强制插入div，但是我确信有更好的方法，因为我的方法仅适用于一定数量的文本.

I have a circle div and my text isn't inside it. By default it is slightly above and I can't pinpoint why. I have added margin to the top to force it inside the div but I am sure there is a better way to do this because my method only works for a certain amount of text.

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内的文本顶部添加边距.

But I want it to look more like this but without having to add margin to the top of the text inside the div.

推荐答案

这里是一个允许在其中输入任意大小文本的版本，尽管周围的< div> 的大小当然必须如果内容的大小大得多，则可以更改.我添加了第二个示例，其中包含更多文本.

Here's a version that allows for any size text inside, although of course the size of the surrounding <div> will have to be changed if the size of the content is vastly greater. I added a second example with a bit more text.

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>

这篇关于圈子div中的文字溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！