Skip to content

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

@wingmeng

Description

@wingmeng

题目:

在网页中,连续英文单词文本默认是不换行的,所以当容器宽度不够显示时,文本内容会溢出。我们通常的做法是使用 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> 这里换行;宽度足够,还是一行显示,非常智能。

参考资料

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions