1

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.

web-tiki
  • 99,765
  • 32
  • 217
  • 249
user123
  • 111
  • 8
  • Can you create this as a runnable embed? – dwjohnston May 12 '21 at 05:08
  • sure okay let me do that – user123 May 12 '21 at 05:08
  • https://jsfiddle.net/m50xsw1j/ please check this fiddle – user123 May 12 '21 at 05:11
  • 1
    In newest browsers you can use `aspect-ratio: 1/1`: https://jsfiddle.net/81ghen06/ For older ones you should be able to use an inner-element trick using `width:100% rotate(90deg);` see https://stackoverflow.com/a/47749136/3702797 – Kaiido May 12 '21 at 05:20
  • but from your fiddle circle is keep on increasing..i would like to increase circle only when text is filled inside circle shape. – user123 May 12 '21 at 05:22
  • So you want line-breaks inside the circle? And when it reaches the overflow-y limit, extend its width? That's not gonna be easy. – Kaiido May 12 '21 at 05:23
  • yes for example if my circle width and height is 100px..it should be reamin same..so automatically text should come to next line..so that if i have extra text..i can do rezise and check..i have already given the resizie option.. – user123 May 12 '21 at 05:24
  • the only thing i want to do is..how much ever the text we added it should be fit inside that cicrlce shape only.. – user123 May 12 '21 at 05:25
  • You can put code directly into your stack overflow question. press ctrl+m while editing your quesitno. – dwjohnston May 12 '21 at 05:29
  • I don't understand your last comments. Could you please take your time to [edit] your question, with as much details as possible, and only with relevant information. For instance, how is the js part relevant in there? You fiddle only has html markup, if that's all we need, then give only that. But explain clearly what steps reproduce your issue. – Kaiido May 12 '21 at 05:31
  • Modified my code along with corrections can you please check once – user123 May 12 '21 at 05:38

2 Answers2

0

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!

Carson Burke
  • 26
  • 5
  • when i tried from fiddel its working somehow..when i went into my code still facing issue and in my css -webkit-shape-outside: circle(); is not applying – user123 May 12 '21 at 05:16
-1

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>
SeeoX
  • 565
  • 3
  • 18