<div class="block">
  <h2>Soft Break Demo</h2>
  <hr />
  <h3>Normal paragraph</h3>
  <p>這是一段很長的文字，主要是在示範怎麼讓斷行斷在你想要的位置上，例如一個完整的單字在RWD時的表現可以讓可讀性巨幅上升等等</p>

  <h3>With soft break</h3>
  <p>
    這是一段很長的文字，主要是在示範<wbr>怎麼讓斷行斷在你想要的位置上，例如<wbr>一個完整的單字在RWD時的表現可以讓可讀性巨幅上升等等
    <br>
    Hello,thisisOwlTing<wbr>system,akathe<wbr>wellknownblockchaincompany.
  </p>
</div>

<div class="block">
  <h2>Soft Hyphen Demo</h2>
  <hr />
  <h3>Normal paragraph</h3>
  <p>這是一段很長的文字，主要是在示範怎麼讓斷行斷在你想要的位置上，例如一個完整的單字在RWD時的表現可以讓可讀性巨幅上升等等</p>

  <h3>With soft hyphen</h3>
  <p>
    這是一段很長的文字，主要是在示範&shy;怎麼讓斷行斷在你想要的位置上，例如&shy;一個完整的單字在RWD時的表現可以讓可讀性巨幅上升等等
    <br>
    Hello,thisisOwlTing&shy;system,akathe&shy;wellknownblockchaincompany.
  </p>
</div>
.block {
  max-width: 600px;
  border: solid 1px;
  margin: 20px auto;
  padding: 1rem;
  // overflow: hidden;
  p {
    word-break: keep-all;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.