Skip to content

Long label do not wrap to next line #109

@0xadri

Description

@0xadri

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/

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions