hyphens:manual与软连字符优化排版效果实例页面

展示

代码

• HTML：

  <h4>没有连字符</h4>
  <p>大家好，我叫zhangxinxu，感谢大家购买我的书。</p>
  <p>大家好，我叫zhangxinxu，感谢大家购买我的书。</p>
  
  <h4>有软连字符</h4>
  <p>大家好，我叫zhang&shy;xin&shy;xu，感谢大家购买我的书。</p>
  <p>大家好，我叫zhang&shy;xin&shy;xu，感谢大家购买我的书。</p>

• CSS：

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