css中如何写才能让在同一个盒子中换行的文字居中对齐

html-css049

css中如何写才能让在同一个盒子中换行的文字居中对齐,第1张

要想如图二那样的效果,需要设置成左右2个区域,给你写个例子。

<div style="display:flex">

<span style="line-height: 40pxpadding-right:10px">18:00</span>

<span>即将开始<br />距离开始还有1:10:20</span>

</div>

1、普通设置: style{ width:400px overflow:hidden text-overflow:ellipsis display:-webkit-box / * autoprefixer:off * / -webkit-box-orient:vertical / * autoprefixer:on * / -webkit-line-clamp:4 } 效果如下:以上会导致英文和数字自动换行不对齐。 2、解决后 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 }