css超出⼀⾏添加省略号属性
转⾃：
通过使⽤text-overflow和white-space属性来使⽂本在⼀⾏内显⽰，超出则加省略号，添加如下：
<p>前端开发博客专注前端开发和技术分享，如果描述超过100像素，则会隐藏，添加省略号</p>
：需要加上宽度(width:100px)、超出隐藏（overflow:hidden;）、强制在同⼀⾏显⽰（white-space: nowrap;）、省略号（text-overflow:ellipsis;）
p{width: 100px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
测试浏览器： IE6/7/8/9、opera12.02、firefox15.0.1、chrome21.0.1180.89 m
1、text-overflow: ellipsis;
这⾥的重点样式是  text-overflow: ellipsis;
不过话说text-ellipsis是⼀个特殊的样式，有关解释是这样的：text-overflow属性仅是注解，当⽂本溢出时是否显⽰省略标记。并不具备其它的样式属性定义。要实现溢出时产⽣省略号的效果还须定义：强制⽂本
在⼀⾏内显⽰（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出⽂本显⽰省略号的效果。
这⾥⾯需要限定宽度、⽂字显⽰在⼀⾏中（white-space:nowrap;）和使⽤隐藏属性overflow。
⽹上给⽀持低版本的opera⼀个办法，就是-o-text-overflow：ellipsis；
2.white-space属性
定义：white-space 属性设置如何处理元素内的空⽩。
实例：规定段落中的⽂本不进⾏换⾏：
p{ white-space: nowrap;}
可能的值
值描述
normal 默认。空⽩会被浏览器忽略。
pre 空⽩会被浏览器保留。其⾏为⽅式类似 HTML 中的 <pre> 标签。
nowrap ⽂本不会换⾏，⽂本会在在同⼀⾏上继续，直到遇到
标签为⽌。
pre-wrap 保留空⽩符序列，但是正常地进⾏换⾏。
pre-line 合并空⽩符序列，但是保留换⾏符。
css横向滚动条隐藏
inherit 规定应该从⽗元素继承 white-space 属性的值。
Object.style.whiteSpace=normal|nowrap|pre
3.word-wrap
定义：word-wrap 属性允许长单词或 URL 地址换⾏到下⼀⾏。
实例：允许长单词换⾏到下⼀⾏：
可能的值：
值描述
normal 只在允许的断字点换⾏（浏览器保持默认处理）。
break-word 在长单词或 URL 地址内部进⾏换⾏。
1.（IE浏览器）连续的英⽂字符和阿拉伯数字，使⽤word-wrap : break-word ；或者word-break:break-all；实现强制断⾏
2.（Firefox浏览器）连续的英⽂字符和阿拉伯数字的断⾏,Firefox的所有版本的没有解决这个问题，我们只有让超出边界的字符隐藏或者，给容器添加滚动条.a{word-break:break-all; width:200px; overflow:auto;}
.(Firefox浏览器)使⽤ table-layout:fixed；强制table的宽度，内层td,th采⽤word- break : break-all；或者word-wrap : break-word ；换⾏，使⽤overflow:hidden；隐藏超出内容，这⾥overflow:auto;⽆法起作⽤

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。