第 19 期(W3C标准-HTML)：换行 #22

题目：

在网页中，连续英文单词文本默认是不换行的，所以当容器宽度不够显示时，文本内容会溢出。我们通常的做法是使用 word-break:break-all 或word-wrap:break-word，但这种强制换行的方式具有不可控性，很容易破坏单词的可读性。请尝试解决这个问题。

测试内容如下：

<p>
  https://juejin.im/search?query=requestAnimationFrame
</p>

要求：容器宽度足够时，整体一行显示；容器宽度不足时，文本内容自动换行，文本中的单词不会被截行。

参考答案：

https://<wbr>juejin.im<wbr>/search?<wbr>query=<wbr>requestAnimationFrame

<wbr> 是一个神奇的标签，可以实现精确换行：当容器宽度不够时，在 <wbr> 这里换行；宽度足够，还是一行显示，非常智能。

参考资料