文本溢出相关总结

溢出属性

overflow: visible;

visible：默认值，内容不会被修改，会成现在元素框之外，

hidden：内容会被修剪，并且其余内容是不可见的，

scroll：内容会被修剪，但是浏览器会显示滚动条，以便查看其余内容，

auto：如果内容被修剪，则浏览器会显示滚动条，以便查看其它内容，

inherit：规定应该从父元素继承overflow属性的值

空余空间

white-space: normal;（改属性用来设置如何处理元素内的空白）

normal：默认值，空白会被浏览器忽略，

nowrap：文本不会换行，文本会在同一行上继续，直到遇到<br />标签为止，

pre：空白会被浏览器保留，其行为方式类似HTML中的pre标签，

pre-wrap：保留空白符序列，但正常的进行换行，

pre-line：合并空白符序列，但是保留换行符，

inherit：规定应该从父元素继承White-space属性的值

省略号显示

text-overflow: clip;（此属性仅是单行文本溢出时是否显示省略标记，并不具备其他样式属性定义）

clip：不显示省略号，而是简单的裁剪，

ellipsis：当对象文本溢出时，显示省略标记

单行文本溢出时产生省略号的方法

方法一

width: 50px;  /* 容器宽度 */
white-space: nowrap; /* 强制文本在一行内显示 */
overflow: hidden;  /* 溢出内容隐藏 */
text-overflow: ellipsis; /* 溢出文本出现省略号 */

方法二

1、给元素加上<nobr></nobr>强制不换行标签

2、设置css样式

overflow: hidden; /* 溢出内容隐藏 */
text-overflow: ellipsis; /* 溢出文本出现省略号 */