文本溢出&内容溢出

溢出文本 text-overflow

• 语法

text-overflow:clip | ellipsis
clip:不显示省略标记...
ellipsis:显示省略标记，插入在最后一个字符

• 三个条件
  • 需要结合强制文本在一行white-space:nowrap
  • 和溢出内容隐藏over-flow:hidden使用
  • 并且需要定义内容宽度width
• 示例
  clip:

text-overflow-clip{
    width:100px;
    padding:10px;
    border: 1px solid #ccc;
    text-overflow:clip; /*文本剪切*/
    white-space:nowrap; /*强制不换行*/
    overflow:hidden; /* 溢出隐藏*/
}

ellipsis:

text-overflow-clip{
    width:100px;
    padding:10px;
    border: 1px solid #ccc;
    text-overflow:ellipsis; 
    white-space:nowrap; /*强制不换行*/
    overflow:hidden; /* 溢出隐藏*/
}

内容溢出overflow

overflow是CSS2.1中的特性，CSS3增加了overflow-x和overflow-y

• 语法

/* 定义水平方向内容溢出剪切： */
overflow-x:visible | hidden | scroll | auto | no-display | no-content
/* 定义垂直方向内容溢出剪切： */
overflow-y:visible | hidden | scroll | auto | no-display | no-content

• 参数功能：
  • visible:默认值，元素将被剪切为包含对象的窗口大小，且clip属性设置失效
  • auto：在需要时剪切内容并添加滚动条
  • hidden：内容溢出时，溢出内容将隐藏，且不显示滚动条
  • scroll：不管内容有没有溢出，都显示滚动条。x, y对应横向和纵向
  • no-display：内容溢出时不显示元素，类似于添加了display:none
  • no-content：当内容溢出时不显示内容，类似于添加visibility:hidden