CSS circle with size adapting to it's content [duplicate] - html

Question

This question already has answers here:
Make a perfect circle around a div of variable height
(4 answers)
How can I ensure that text is inside rounded div?
(7 answers)
Closed 1 year ago.
Hi guys i have created circle using CSS shape.
I have used contentEditable="true" so the content of the circle can be edited.
The problem here is now when I edit the text inisde the circle it is going outside of the circle. What I am trying to do is when I add extra text the text should automatically move to next line inside the circle itself.
I don't want to increase the width and height of the circle.
Can anyone help me where I did mistake.
Here is my code :
.circle {
width: 50px;
height: 50px;
background-color: #40a977;
border-radius: 50%;
float: left;
shape-outside: circle();
}
<div contentEditable="true" class="circle">circle</div>
Can anyone help me where i did mistake.Thanks in advance.

Answer 1

You've created a circle and defined the height and width. As a result, where the circle would expand to fit all the text in, it instead stays at 50px by 50px. You can fix this by adding CSS
min-width: 50px;
min-height: 50px;
to the class. This says that the circle has to be at least 50px by 50px, but may be larger depending on the text inside. I hope this answers what you were asking!

Answer 2

You can't affect the width of an element to the height in pure CSS.
With JS you can create an event on modifications and adjust the height or padding (for the text to keep centered) depending on width value.
With a DOM modification, you can access on the parent width in CSS. If not defined, the parent will take the with of the child.
JS, same DOM
function updateCircle(circle) {
let width = Number.parseInt(getComputedStyle(circle).width);
let lineHeight = Number.parseInt(getComputedStyle(circle).lineHeight);
circle.style.paddingTop = (width - lineHeight) / 2 + 'px';
circle.style.paddingBottom = (width - lineHeight) / 2 + 'px';
};
// Modify on edit
document.getElementById('circle').addEventListener('input', function(){
updateCircle(this);
});
// On page load
updateCircle(document.getElementById('circle'));
#circle {
padding: 0;
background-color: #40a977;
border-radius: 50%;
float: left;
font-size: 16px;
line-height: 16px;
}
<div contentEditable="true" id="circle">circle</div>
CSS, different DOM
#circle {
padding: 0;
float: left;
}
#circle > div{
height: 16px;
background-color: #40a977;
border-radius: 50%;
padding: calc(50% - 16px / 2) 0;
font-size: 16px;
line-height: 16px;
}
<div id="circle">
<div contentEditable="true">circle</div>
</div>