CSS内容超出DIV宽度后自动换行，显示省略号

 内容超出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 : 内容将在边界内换行，允许单词换行。