CODEWITHSUNDEEP
htmlcssstylesstylesheet
TrickMonkey
TrickMonkey

Reputation: 155

Center text in a circle css3 issue

I am trying to have circles with text in them. The issue is that when the font size gets big... the text overlaps the circle. How can I solve this issue?

.circle {
    display: inline-block;
    font-size: 42px;
}

.circle label {
    cursor:pointer;
    height: 200px;
    width: 200px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    border-radius: 50%;
    background: yellow;
}

label input[type="checkbox"] {
    display:none;
}
input[type="checkbox"]:checked + span {
    color: #fff;
}

JSFiddle Demo

Upvotes: 0

Views: 357

Answers (5)

Facundo Corradini
Facundo Corradini

Reputation: 3933

Keeping the circle shape (not oval / elipse) while resizing the div according to the content is not an easy task at all.

There's a technique that uses an absolute positioned pseudo-element with 100% width and 100% padding-bottom in order to keep the circle.. a circle.

It relies on the fact that percentages on padding-top and padding-bottom are calculated based on the width and not the height as most would expect, to prevent infinite loops. Sounds counter-intuitive, but it works.

Then there's the problem of the actual content not being 100% the circle height (neither is the wrapper, as the circle is absolute positioned), so centering the content is challenging as well. Once again, using % on padding-top so it gets calculated based on the width + negative transform: translateY will do the trick.

And last but not least, keeping the words on separate lines is a job for width: min-content.

All of that, results in this: 

body{
/*just to display circles inline and centered*/
  display:flex; 
  align-items:center;
  flex-wrap: wrap;
}

.circle{
  padding:1em;
}

.inner{
/*centers the content*/
  padding:100% 20px 0 20px;
  transform:translateY(-50%);
/*sets the width as the biggest word*/
  width:min-content;
/*styling*/
  text-align:center; color:white; font-weight:bold; font-family:sans-serif; 
/*sets the label as inline-block, so it doesn't take 100% width*/
  display:inline-block;
/*prevents clicks outside the circle from switching the checkbox*/
  pointer-events:none;
}
.inner::before{
    content:"";
    position:absolute;
/*adjust for the padding + translateY on the element*/
    top:50%; left:0;
/*sets the width as 100% of the element*/
    width:100%;
/*sets the padding-bottom (and therefore, the height) as 100% the width of the element*/
    padding-bottom:100%;
/*styling*/
    background-color:steelblue;
    border-radius:50%;
/*puts it behind the content*/
    z-index:-1;
/*resets the pointer-events so clicking on the circle affects the checkbox */
    pointer-events:auto;
    cursor:pointer;
}
<input type="checkbox" id="check1">
<div class="circle">
  <label for="check1" class="inner">Really biiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiig circle</label>
</div> 

<input type="checkbox" id="check2">
<div class="circle">
  <label for="check2" class="inner">small circle</label>
</div>

Notice I've adjusted the label to be the .inner labels, but set the pointer-events to none and then reset it on the pseudo-element, to prevent clicks outside the circle (but inside the box) from switching the checkboxes

Upvotes: 2

reiallenramos
reiallenramos

Reputation: 1295

add padding and overflow attributes

.circle label {
  cursor: pointer;
  height: 200px;
  width: 200px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  border-radius: 50%;
  background: yellow;
  overflow: hidden;  # add this
  padding: 10px;     # add this
}

Upvotes: 0

caiovisk
caiovisk

Reputation: 3819

Use the CSS property word-break: then you can set it value to break-all.

.circle label {
  word-break: break-all; 
}

See docs: https://www.w3schools.com/cssref/css3_pr_word-break.asp

.circle {
  display: inline-block;
  font-size: 42px;
}

.circle label {
  cursor: pointer;
  height: 200px;
  width: 200px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  border-radius: 50%;
  background: yellow;
  word-break: break-all;
}

label input[type="checkbox"] {
  display: none;
}

input[type="checkbox"]:checked + span {
  color: #fff;
  font-size: 42px;
}
<div class="circle">
  <label>
    <input type="checkbox" id="Technology Operations" value="on"><span>Technology sdfsdfsdfsdf</span></label>
</div>

Upvotes: 0

Eddie Taliaferro II
Eddie Taliaferro II

Reputation: 185

If you want it to be a full circle after the edit, add a padding of maybe 100px. That way the shape is still a circle afterwards because padding is being applied to all sides evenly. 

 .circle label {
    padding: 100px; 
   }

this would be the same as

padding: 100px 100px 100px 100px;

padding: top, right, bottom, left.

Upvotes: 0

Josh Adams
Josh Adams

Reputation: 2099

You can add some padding to your css:

https://jsfiddle.net/jve51qmb/7/

.circle label {
  cursor: pointer;
  height: 200px;
  width: 200px;
  display: table-cell;
  text-align: center;
  padding: 20px 10px 10px 20px;
  vertical-align: middle;
  border-radius: 50%;
  background: yellow;
}

Upvotes: 0

Related Questions