記一個ios下text-overflow: ellipsis 與 text-align: justify 沖突的問題

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;