效果图

image.png

代码

  1. <p class="ell" dir="ltr">开头是我，这是中间，然后就是结束</p>
  2. <p class="ell" dir="rtl">开头是我，这是中间，然后就是结束</p>
.ell {
    width: 14em;
    white-space: nowrap; 
    text-overflow: ellipsis;
    overflow: hidden; 
}

页面展示支持换行符等效果

.pre-wrap {
  word-break: break-all;
  white-space: pre-wrap;
}