CSS解决中英文、数字和网址自动换行错位不对齐的问题

先看一段普通的css代码

style{
width:400px;
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
/ * autoprefixer:off * /
-webkit-box-orient:vertical;
/ * autoprefixer:on * /
-webkit-line-clamp:4
}

其显示效果如下

很明显，这种错乱的显示结果不是我们想要的，下面是优化后的代码

style{
width:400px;
word-break:break-all;
word-wrap:break-word;
overflow:hidden;
text-align:left;//这是我在表格中使用时表头设置了居中，通用可不设置
text-overflow:ellipsis;
display:-webkit-box;
/ * autoprefixer:off * /
-webkit-box-orient:vertical;
/ * autoprefixer:on * /
-webkit-line-clamp:4
}

优化后显示效果如下

赞(2)

打赏 微信 支付宝 QQ 扫码打赏

浏览器页面显示错乱 css强制不换行 css文字自动换行 文本控制自动换行 文本自动换行 强制换行css 中英互译在线翻译 css禁止换行 有道在线翻译英语 css文字不换行 css