prettyCheckable icon indicating copy to clipboard operation
prettyCheckable copied to clipboard

Long label do not wrap to next line

Open 0xadri opened this issue 8 years ago • 0 comments

Long label do not wrap properly to next line, see by yourself on this jsfiddle:

https://jsfiddle.net/AdrienBe/t38fcLjh/1/

I found a way to fix this using the following CSS:

.prettycheckbox label,
.prettyradio label {
  float: none;
  line-height: 20px;
  margin-left: 40px;
  margin-top: 5px;
}

See the fix on jsfiddle https://jsfiddle.net/AdrienBe/bm5xv7t6/

This fix might not work when the label is positioned on the left. It is a good start I believe though.

An improvement to this solution would be to also add:

.prettycheckbox label,
.prettyradio label {
  word-break: break-word;
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;

  /* break long words, see https://jsfiddle.net/AdrienBe/fyr25nh1/ */
  float: none;
  line-height: 20px;
  margin-left: 40px;
  margin-top: 5px;
}

See this fix on jsfiddle https://jsfiddle.net/AdrienBe/bm5xv7t6/3/

0xadri avatar Feb 16 '16 04:02 0xadri