10 09/2014

white-space

最后更新: Wed Sep 10 2014 12:29:11 GMT+0800

This example demons-
trates the white-space property.

You can see the result of the different white-space properties by clicking on one of the properties on the left.

第三段文字！

https://www.google.com.hk/#newwindow=1&q=best+practice+li+toggle+jquery+siblings+parent+find

white-space



  • normal

  • nowrap

  • pre

  • pre-line

  • pre-wrap

  • inherit




word-wrap



  • normal

  • break-word




word-break



  • normal

  • break-all

  • keep-all


white-space

  • normal 正常的html渲染（忽略html源代码中的换行，空格、tab 等,超出宽度换行）
  • nowrap 强制不换行
  • pre 保持 html 源代码中的格式（preformat）
  • pre-line 在 pre 的基础上，连续空格合并为一个；文字超出宽度换行；
  • pre-wrap 在 pre 的基础上，连续空格不合并；文字超出宽度换行；这个常常是我们需要的！
  • inherit 继承父元素的属性

word-wrap

  • normal
  • break-word 允许单词被打断！

word-break

non-CJK scripts( CJK 中日韩 这样的方块字) Break words between any two letters

  • normal
  • break-all 允许（英文）单词被打断！
  • keep-all Breaks are prohibited between pairs of letters

word-wrap: break-word 还是 word-break: break-all

  • word-wrap: break-word 表示单词可以被打断（迫不得已的情况下）。
  • word-break: break-all 表示怎么打断（都打断，不管必要与否）

简单理解：ie67 只认识 word-break: break-all

word-wrap 在 css3 中将会改名为 overflow-wrap

如何建议换行？

U+2010 (HYPHEN 连字符 显示为 -) 或者 U+00AD (SHY 这个看不见)

可以在 html 中手工 ­ 或者 ‐

也可以用 css4 hyphens:auto

  • hyphens:none 单词不断开，即使有 HYPHEN 或者 SHY。只在空格处断词
  • hyphens:manual 默认值。在 HYPHEN 或者 SHY 处断词
  • hyphens:auto 自动断词，但 HYPHEN 或者 SHY 优先。MDN 建议 html lang=”en-us” 等明确您的语言，帮助浏览器正确判断

via MDN CSS hyphens

或者html标签 <wbr> （Word Break Opportunity 表示 这里可以换行）

fwefwefewerwerwerwerwerwerwerwerwerw1234erwerwerwerwerwerwer

或者在 html &#8203; ie6 会显示怪字符

opera wbr 有问题，可以加入 css

wbr:after { content: "\00200B" }

via quirksmode wbr