css实现超出部分显示省略号，css实现字母自动折行

css实现超出部分显示省略号
显示一行，省略号

 white-space: nowrap;
 text-overflow: ellipsis;
 overflow: hidden;
 word-break: break-all;
 /* 不换行，超出部分隐藏且以省略号形式出现*/

显示两行，省略号

 
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;

css实现字母自动折行

加上如下的CSS设置，设定好宽度width，然后设置合适的word-wrap和word-break属性：

.breakAll{
  white-space:normal;
  word-break:keep-all;
  word-wrap: break-word;
}

word-break 语法
属性设置如何处理单词折断，仅支持IE

word-break : normal | break-all | keep-all

参数：

• normal : 依照亚洲语言和非亚洲语言的文本规则，允许在字内换行
• break-all :该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本。只对英文起作用，以字母作为换行依据
• keep-all :与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本。完整英文单词换行

white-space语法
属性设置如何处理元素内的空白，文本进行换行

white-space: normal | nowarp | pre | pre-line | pre-warp | inherit

参数：

• normal 默认。空白会被浏览器忽略。
• pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
• nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。强制不换行，都起作用。
• pre-wrap 保留空白符序列，但是正常地进行换行。只对中文起作用，强制换行
• pre-line 合并空白符序列，但是保留换行符。
  inherit 规定应该从父元素继承 white-space 属性的值。

word-wrap 属性
word-wrap属性允许长的内容可以自动换行。

word-wrap: normal|break-word;

参数：

• normal 只在允许的断字点换行（浏览器保持默认处理）。
• break-word 在长单词或 URL 地址内部进行换行。只对英文起作用，以单词作为换行依据