white-space: nowrap; //强制不换行
text-overflow:ellipsis; //省略号显示
overflow:hidden; //超出隐藏
overflow: auto; //出现滚动条
当固定盒子的宽度时,中文会换行,但是英文和数字不换行,解决的方法如下:
1. 强制英文换行(二选一)
word-break: break-all;
word-wrap: break-word;
2. 强制中文换行 只对中文有作用
white-space: pre-wrap;
3. 强制不换行 中英文都有作用
white-space: nowrap;
4. 超出不换行,超出部分隐藏且以省略号形式出现(部分浏览器支持)中英文都有作用
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
5. 超出两行换行
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
width: 550rpx;
line-height: 40rpx;