溢出常用属性

属性

描述

说明

overflow

溢出

  • visible：默认值，溢出内容会显示在元素之外；
  • hidden：溢出内容隐藏；
  • scroll：滚动，溢出内容会以滚动条的方式显示；
  • auto：如果有溢出则会添加滚动条，没有溢出正常显示；
  • inherit：规定应该遵从父元素继承overflow属性的值；
  • overflow-x：X轴溢出；
  • overflow-y：Y轴溢出；

white-space

空余空间

  • normal：默认值，空白会被浏览器忽略;
  • nowrap：文本不会换行，文本会在同一行上继续，直到遇到<br/>标签为止；
  • pre：预格式化文本-保留空格  tab，回车   但不会自动换行
            /* 可以用<pre></pre>直接写 */；
  • pre-wrap：会折行但会保留空格；
  • pre-line：只显示回车，不显示空格，换行；
  • inherit：从父元素中继承此属性；

text-overflow

省略号

  • clip：默认值，不显示省略号；
  • ellipsis：显示省略号；

  当单行文本溢出显示省略号需要同时设置以下声明：

  1. 容器宽度：width;
  2. 强制文本在一行内显示：white-space:nowrap;
  3. 溢出内容为隐藏：overflow：hidden;
  4. 溢出文本显示省略号：text-overflow： ellipsis;