记一个ios下text-overflow: ellipsis 与 text-align: justify 冲突的问题

霸气de小男生 提交于 2019-11-26 16:37:37

https://codepen.io/hzsrc/pen/PMavxW

以下代码在ios下打开,后面那三个“...”会与文字重叠。

<div class="ellipsis2">手动积分手动2积分手动积分手动积分手动积分手动积分手动积分手动积分手动积分</div>
<style>
.ellipsis2 {
    overflow: hidden;
    text-overflow: ellipsis;
    /*! autoprefixer: ignore next*/
     display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; 
  -webkit-box-align:end;
  
  width:200px;
  text-align: justify;
}
</style>

原因是ios下text-overflow: ellipsis 与 text-align: justify 冲突的bug。

解决办法只能是避免同时使用

 

 

  text-align: justify;

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!