第 19 期(W3C标准-HTML):换行
wingmeng opened this issue · comments
Wing Meng commented
题目:
在网页中,连续英文单词文本默认是不换行的,所以当容器宽度不够显示时,文本内容会溢出。我们通常的做法是使用 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> 这里换行;宽度足够,还是一行显示,非常智能。