内容超出DIV宽度后自动换行
word-wrap: break-word; // 在长单词或URL地址内部进行换行
word-break: break-all; // 允许单词内自动换行,如果一个单词很长的话
overflow: hidden;
// or
word-wrap: break-word;
word-break: normal;
强制换行
// 单词换行需要父盒子为块级元素
word-break: break-all; // 按字符截断换行;支持IE和chrome,FF不支持
word-wrap: break-word; // 按英文单词整体截断换行;以上三个浏览器均支持
强制不换行
white-space: nowrap;
内容超出DIV宽度后显示省略号
单行
width: 100vw; // 宽度100%:1vw等于视口宽度的1%;1vh等于视口高度的1%
white-space: nowrap; // 溢出不换行
overflow: hidden; // 超出的文本隐藏
text-overflow: ellipsis; // 溢出用省略号显示
多行
word-break: break-all; // 允许单词内自动换行,如果一个单词很长的话
text-overflow: ellipsis; // 溢出用省略号显示
overflow: hidden; // 超出的文本隐藏
display: -webkit-box; // 作为弹性伸缩盒子模型显示
-webkit-line-clamp: 2; // 显示的行
-webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式--从上到下垂直排列
换行属性语法
1.word-break : normal | break-all | keep-all
normal 使用浏览器默认的换行规则,允许字内换行。
break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。
2.word-wrap : normal | break-word
normal : 允许内容顶开指定的容器边界,允许字内换行。
break-word : 内容将在边界内换行,允许单词换行。