liser/src/modules/word-break.css

functional css help to optimizing design work and building responsive websites

.word-normal {
  word-break: normal;
}
.word-wrap {
  word-break: break-all;
}
.word-nowrap {
  word-break: keep-all;
}

@media screen and (min-width: 30em) {
  .word-normal-ns {
    word-break: normal;
  }
  .word-wrap-ns {
    word-break: break-all;
  }
  .word-nowrap-ns {
    word-break: keep-all;
  }
}

@media screen and (min-width: 30em) and (max-width: 60em) {
  .word-normal-m {
    word-break: normal;
  }
  .word-wrap-m {
    word-break: break-all;
  }
  .word-nowrap-m {
    word-break: keep-all;
  }
}

@media screen and (max-width: 60em) and (orientation: landscape) {
  .word-normal-ml {
    word-break: normal;
  }
  .word-wrap-ml {
    word-break: break-all;
  }
  .word-nowrap-ml {
    word-break: keep-all;
  }
}

@media screen and (min-width: 60em) {
  .word-normal-l {
    word-break: normal;
  }
  .word-wrap-l {
    word-break: break-all;
  }
  .word-nowrap-l {
    word-break: keep-all;
  }
}