45510

Text overflow in circle div

Question:

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.

<pre class="snippet-code-css lang-css prettyprint-override">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; } <pre class="snippet-code-html lang-html prettyprint-override"><div class="description">

Title

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.

</div>

This is what it looks like <a href="https://i.stack.imgur.com/fLOKJ.png" rel="nofollow"><img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/fLOKJ.png" data-original="https://i.stack.imgur.com/fLOKJ.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" /></a>

But I want it to look more like this but without having to add margin to the top of the text inside the div. <a href="https://i.stack.imgur.com/1dE9A.png" rel="nofollow"><img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/1dE9A.png" data-original="https://i.stack.imgur.com/1dE9A.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" /></a>

Answer1:

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.

<pre class="snippet-code-css lang-css prettyprint-override">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%); } <pre class="snippet-code-html lang-html prettyprint-override"><div class="description">

Title

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.

</div> <div class="description">

Title

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.

</div>

Answer2:

You should use css3 <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" rel="nofollow"><strong>flexbox</strong></a>. Following css will make an element horizontally and vertically middle aligned:

div.description { flex-direction: column; justify-content: center; align-items: center; display: flex; }

<pre class="snippet-code-css lang-css prettyprint-override">div.description { flex-direction: column; justify-content: center; align-items: center; display: flex; position: relative; margin-top: 250px; width: 500px; height: 500px; border-radius: 50%; background-color: #caebf2; white-space: pre-line; text-align: center; padding: 25px; } <pre class="snippet-code-html lang-html prettyprint-override"><div class="description">

Title

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.

</div>

For old browser support you can use following css to make it middle aligned:

div.description { display: table; } div.description div.text { vertical-align: middle; display: table-cell; }

<pre class="snippet-code-css lang-css prettyprint-override">div.description { display: table; position: relative; margin-top: 250px; width: 500px; height: 500px; border-radius: 50%; background-color: #caebf2; white-space: pre-line; text-align: center; padding: 25px; } div.description div.text { vertical-align: middle; display: table-cell; } <pre class="snippet-code-html lang-html prettyprint-override"><div class="description"> <div class="text">

Title

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.

</div> </div>

Answer3:

You can use the concept of padding:20px; to achieve the output you have expected

<pre class="snippet-code-css lang-css prettyprint-override">div.description { display: inline-block; position: relative; margin-top: 250px; width: 500px; height: 500px; padding: 20px; border-radius: 50%; background-color: #caebf2; white-space: pre-line; text-align: center; } <pre class="snippet-code-html lang-html prettyprint-override"><div class="description">

Title

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.

</div>

Answer4:

you can try this. giving a max-width to p element smaller than the circle so it will not exede beyond the circle.

<pre class="snippet-code-css lang-css prettyprint-override">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.description p{ max-width: 450px; margin: 0 auto; } <pre class="snippet-code-html lang-html prettyprint-override"><div class="description">

Title

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.

</div>

Recommend

  • jquery toggling all the content
  • XPath fails on an XML document in R
  • How to scroll a DataGrid using scrollviewer of another DataGrid
  • CDATA not parsing properly in Firefox
  • Issue with setting div 100% width and height 100%
  • Searching for nested documents on a specific parent
  • jQuery highlight plugin breaks a word with special characters (üöä)
  • need help to understand the below jquery code
  • What is causing this white box inside my Jquery Accordion?
  • RMarkdown: Tables with math notation and long text within
  • Xamarin.Forms.CarouselView doesn't work on iOS
  • WooCommerce get attribute thumbnail - Variation Swatches and Photos plugin
  • Regular expressions: Finding BB code in a piece of text
  • Getting distinct total results from RavenDB
  • How to make jQuery animate upwards
  • How to make font size adapt to character length
  • jquery get the cursor position after click
  • Android gson deserialization into list
  • How to focus on a particular portion of an another html page when click on a button or link
  • Store Bootstrap Data - Modal, Badges and Alerts
  • Jquery - Break/Prevent each loop
  • JavaScript Creating array in object and push data to the array
  • jQuery UI Tabs - bind tabs to links on the same page
  • php_network_getaddresses: getaddrinfo failed
  • ngClass not updating the class
  • Can I change font size based on the number of letters? [duplicate]
  • CSS Border DIV as a Shape
  • Implement keyboard navigation in lists using AngularJS
  • Kentico Repeater HTML Properties showing with selected transformation
  • How can I allow tags through rails 4 sanitize?
  • Changing the color of an image link on hover
  • Get css animation property with jQuery
  • ng-repeat not working with table but works with list
  • Best HTML5 structure for a layout where the title/header is outside the article tag
  • jinja2 template not found and internal server error
  • How to remove gaps in flexbox?
  • Floated image with variable width and heading with background image
  • Jetty Server not starting: Unable to establish loopback connection
  • Change an a tag attribute in JavaScript based on screen width
  • Flexbox equal height doesn't work