1.word-break使用(通常用在英文句子上)
word-break有三种：
a. break-all(允许在单词内换行)
b. normal(使用浏览器默认的换行规则)
c. keep-all(保持单词完整性，只能在半角空格或连字符处换行)
2.white-space
a. normal (默认。空白会被浏览器忽略。)
b. nowrap(文本不会换行，文本会在在同一行上继续，直到遇到
标签为止。)
3.text-overflow文字溢出
a. clip (直接裁剪超出的文本)
b. ellipsis (显示省略符号来代表被修剪的文本)
综合例子：
溢出文字
.left ,
.middle ,
.right {
width: 400px;
height: 400px;
border: 1px solid blue;
float: left;
margin-left: 10px;
}
.left div,
.middle div,
.right div{
width: 160px;
height: 30px;
border: 1px solid red;
margin-top: 20px;
}
.left div:first-child{
word-break: break-all;
}
.left div:nth-child(2){
word-break: normal;
}
.left div:nth-child(3){
word-break: keep-all;
}
.middle div:first-child{
white-space: normal;
}
.middle div:nth-child(2){
white-space: nowrap;
}
.right div:first-child{
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
}
.right div:nth-child(2){
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
today is a beatiful day.today is a beatiful day.today is a beatiful d-ay.美国加利福尼亚州州长加文·纽瑟姆19日宣布“居家令”美国加利福尼亚州州长加文·纽瑟姆19日宣布“居家令”美国加利福尼亚州州长加文·纽瑟姆19日宣布“居家令”美国加利福尼亚州州长加文·纽瑟姆19日宣布“居家令”
效果如下图
image.png
