fezaoduke / fe-practice-hard

晚练课

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

第 19 期(W3C标准-HTML):换行

wingmeng opened this issue · comments

题目:

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

测试内容如下:

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

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


参考答案:

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

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

参考资料