CSS-空白处理和换行规则-文字溢出行为-浏览器前缀

CSS属性 white-space

white-space用于设置空白处理（空格、tab键、换行）和换行规则

• normal：合并所有连续的空白，允许单词超屏时自动换行

• nowrap：合并所有连续的空白，不允许单词超屏时自动换行

• pre：阻止合并所有连续的空白，不允许单词超屏时自动换行

• pre-wrap：阻止合并所有连续的空白，允许单词超屏时自动换行

• pre-line：合并所有连续的空白（但保留换行），允许单词超屏时自动换行

CSS属性 text-overflow

• text-overflow通常用来设置文字溢出时的行为

  • clip：溢出的内容直接裁剪掉（字符可能会显示不完整）

  • ellipsis：溢出那行的结尾处用省略号表示

• text-overflow生效的前提是overflow不为visible

• 常见的是将white-space、text-overflow、overflow一起使用：

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  

浏览器前缀

• 有时候可能会看到有些CSS属性名前面带有：-o-、-xv-、-ms-、mso-、-moz-、-webkit-

• 官方文档专业术语叫做：vendor-specific extensions（供应商特定扩展）

• 为什么需要浏览器前缀了？

  • CSS属性刚开始并没有成为标准，浏览器为了防止后续会修改名字，给新的属性添加浏览器前缀

• 上述前缀叫做浏览器私有前缀，只有对应的浏览器才能解析使用

  • -o-、-xv-：Opera等

  • -ms-、mso-：IE等

  • -moz-：Firefox等

  • -webkit-：Safari、Chrome等