CSS文本溢出设置

CSS文本溢出设置

一、text-overflow文本溢出显示省略号

1.text-overflow:clip; 不显示省略号（…),而是简单的裁切
2.text-overflow:ellipsis;单行文本溢出时显示省略号

二、White-space设置空白空间的效果

1.white-space:normal;默认值
2.white-space：nowrap;文本不会换行，文本会在同一行上继续，直到遇到br标签为止
3.white-space:pre;空白符会被保留，浏览器可以识别空格
4.white-space：pre-line;合并空白符序列，但是保留换行符
5.white-space：pre-wrap;保留一部分空白符序列，但是正常的进行换行

三、overflow设置溢出效果

1.overflow:visible; 默认值，内容不会被修剪。会呈现在元素框之外
2.overflow:hidden; 内容会被修剪，其余内容不可见
3.overflow:auto;如果内容被修剪，则浏览器会显示滚动条，以便查看其它的内容
4.overflow:scroll;内容被修剪，但是浏览器会显示滚动条，以便查看其余内容；
overflow是简写，overflow-x，overflow-y

四、单行文本溢出产生省略号需定义：