JSFiddle - React, Tailwind, and code Playground

by camel2243

HTML

<h3>word-break: normal; && word-wrap: break-word;</h3>
<div class="word-break--normal">
The very long english pargraph. (testtestetstesttest)
一個非常長的句子。(測試 測試 測試)
haha, I'm a very long test sentence.(testtestesttest)
</div>
<hr />
<h3>word-break: break-all; && word-wrap: break-word;</h3>
<div class="word-break--break-all">
The very long english pargraph. (testtestetstesttest)
一個非常長的句子。(測試 測試 測試)
haha, I'm a very long test sentence.(testtestesttest)
</div>
<hr />
<h3>word-break: keep-all; && word-wrap: break-word;</h3>
<div class="word-break--keep-all">
The very long english pargraph. (testtestetstesttest)
一個非常長的句子。(測試 測試 測試)
haha, I'm a very long test sentence.(testtestesttest)
</div>

CSS

div{
  width: 90px;
  background-color: rgba(100, 100, 100, 0.5);
  word-wrap: break-word;
}

.word-break--normal{
  word-break: normal;
}

.word-break--break-all{
  word-break: break-all;
}

.word-break--keep-all{
  word-break: keep-all;
}