word-break, break-word, etc

by jorgeluis

HTML

<p class="text"><b>Make sure you try different screen sizes.</b> Cognitive load is the total amount of mental effort that is required to complete a task. You can think of it as the processing power needed by the user to interact with a product. If the information that needs to be processed exceeds the user’s ability to handle it, the cognitive load is too high. And here's a very long string with no spaces wq98ehpeiahwpe8awehfoiauhiruvbsivubsr;ivunr;vaubrv;arvarasdoifafhap98awpev98awhvp98wvhapw8vhap98vahwpv98ahrpv9ararv</p>

<p class="text has-hyphens"><b>Make sure you try different browsers.</b> Cognitive load is the total amount of mental effort that is required to complete a task. You can think of it as the processing power needed by the user to interact with a product. If the information that needs to be processed exceeds the user’s ability to handle it, the cognitive load is too high. And here's a very long string with no spaces wq98ehpeiahwpe8awehfoiauhiruvbsivubsr;ivunr;vaubrv;arvarasdoifafhap98awpev98awhvp98wvhapw8vhap98vahwpv98ahrpv9ararv</p>

SCSS

.text {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-word;
}

.has-hyphens {
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

html, body {
  height: 100%;
}

body {
  font: 20px/1.3 sans-serif;
}