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

0 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
}

其显示效果如下

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

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

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

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
}

优化后显示效果如下

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

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

赞(0)
打赏 微信扫一扫微信 支付宝 QQ 扫码打赏
如若转载,请注明本文出自:https://www.guaitoo.com/show/197.html