单行文本省略号的设置

单行文本省略号的设置

width: 100px; //设置一个宽度
white-space: nwrap; //强制在一行显示
overflow: hidden; //溢出隐藏
text-overflow: ellipsis; //显示省略号

容器溢出

overflow: visible | hidden | scroll | aoto;

visible : 默认值，溢出内容显示在容器框之外
hidden : 溢出内容隐藏不可见
scroll : 以滚动条的形式查看溢出内容，没有溢出时显示默认滚动条
auto : 自动检测是否有溢出，溢出时添加滚动条

注：还可以单独设置某个方向的溢出

overflow-x: hidden | scroll | auto;
overflow-y: hidden | scroll | auto;

文本溢出

强制在一行显示

white-space: normal | nowarp | per | per-line | per-warp;

normal : 默认值
nowarp | per | per-line | per-warp如下图：

属性值	是否在一行显示	是否识别空格	是否识别换行
norwarp	强制在一行显示	不识别空格	不识别换行
per	强制在一行显示	识别空格	不识别换行
per-line	不强制在一行显示	不识别空格	识别换行
per-warp	不强制在一行显示	识别空格	识别换行

文本溢出

text-overflow: clip | ellipsis;

clip : 默认值，简单的裁切，不显示省略号
elipsis : 显示省略号