Overflow del testo in circle div

Ho un div circle e il mio testo non è al suo interno. Di default è leggermente sopra e non riesco a individuare il perché. Ho aggiunto margine in alto per forzarlo all’interno del div ma sono sicuro che c’è un modo migliore per farlo perché il mio metodo funziona solo per una certa quantità di testo.

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; } 
 

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.

Questo è quello che sembra inserisci la descrizione dell'immagine qui

Ma voglio che assomigli più a questo, ma senza aggiungere margine alla parte superiore del testo all’interno del div. inserisci la descrizione dell'immagine qui

Ecco una versione che consente di inserire testo di qualsiasi dimensione all’interno, anche se ovviamente la dimensione del

circostante dovrà essere modificata se la dimensione del contenuto è enormemente maggiore. Ho aggiunto un secondo esempio con un po ‘più di testo.

 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%); } 
 

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.

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.

Dovresti usare css3 flexbox . Seguendo css, un elemento verrà allineato orizzontalmente e verticalmente al centro:

 div.description { flex-direction: column; justify-content: center; align-items: center; display: flex; } 
 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; } 
 

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.

Puoi usare il concetto di padding:20px; per raggiungere l’output che ti aspettavi

 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; } 
 

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.

puoi provarlo dando un max-width all’elemento p più piccolo del cerchio in modo che non esca oltre il cerchio.

 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; } 
 

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.