Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

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

Copy link
Copy link
@wingmeng

Description

@wingmeng
Issue body actions

题目:

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

      Morty Proxy This is a proxified and sanitized view of the page, visit original site.