0

enter image description here

As the picture shows, I need to get rid of the area roughly indicated with the red circle. The aim is to horizontally center the second radio button with its label like the one above and below. This extra undesired width comes about due to the text overflow and the word breaking to the next line when there is not enough width for it all to go on one line.

  • Note that the aim is to center the radio button and label together i.e. the space between the radio button's right edge and the label's left edge should remain the same.
  • Also, the second line should not center horizontally, but start from below the radio button as it is already.

Here's a barebone example of the issue: http://codepen.io/KristjanLaane/pen/ryQZoM

HTML

<body>
  <div>
    <input id="radio1" type="radio" name="choice">
    <label for="radio1">Lorem ipsum dolor sit amet.</label>
  </div>
  <div>
    <input id="radio2" type="radio" name="choice">
    <label for="radio2">Phasellus rutrum scelerisque. Aenean longwordhere tomakethepoint ultricies.</label>
  </div>
  <div>
    <input id="radio3" type="radio" name="choice">
    <label for="radio3">Cras auctor justo metus.</label>
  </div>
</body>

CSS

body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

div {
  border: 1px solid blue;
}

label {
  background: yellow;
  font-size: 25px;
}
Community
  • 1
  • 1
Cel
  • 6,467
  • 8
  • 75
  • 110

1 Answers1

0

Break the lengthy word to cover the white space by using word-break: break-all;

label {
    background: yellow;
    font-size: 25px;     
    word-break: break-all;
  }

DEMO

Sowmya
  • 26,684
  • 21
  • 96
  • 136