<wbr>标签与排版效果优化实例页面

展示

代码

• HTML：

  <h4>没有&lt;wbr&gt;</h4>
  <p>大家好，我叫zhangxinxu，感谢大家购买我的书。</p>
  <p>大家好，我叫zhangxinxu，感谢大家购买我的书。</p>
  
  <h4>有&lt;wbr&gt;或&amp;#x200B;</h4>
  <p>大家好，我叫zhang<wbr>xin<wbr>xu，感谢大家购买我的书。</p>
  <p>大家好，我叫zhang&#x200B;xin&#x200B;xu，感谢大家购买我的书。</p>

• CSS：

  p {
      width: 154px;
      padding: 10px;
      border: solid deepskyblue;
      text-align: justify;
      text-justify: inter-ideograph;
  }
  p + p {
      width: 184px;
  }