文字裁剪中间

css

.wrap-demo1 {
    position: relative;
    line-height: 2;
    height: 2em;
    padding: 0 10px;
    overflow: hidden;
    background: #fff;
    margin: 5px 0;
}
.demo1 {
    display: block;
    position: relative;
    background: inherit;
    text-align: justify;
    height: 2em;
    overflow: hidden;
    top: -4em;
}

.demo1::before{
    content: attr(title);
    width: 50%;
    float: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    direction: rtl;
}

html

<ul class="">
      <li class="wrap-demo1">
          <span  style=" display: block; max-height: 4em;">CSS 测试标题，这是一个稍微有点长的标题，超出一行以后才会有title提示，标题是 实现优惠券的技巧 - 2021-03-26</span>
          <span class="demo1" title="CSS 测试标题，这是一个稍微有点长的标题，超出一行以后才会有title提示，标题是 实现优惠券的技巧 - 2021-03-26">CSS
              测试标题，这是一个稍微有点长的标题，超出一行以后才会有title提示，标题是 实现优惠券的技巧 - 2021-03-26</span>
      </li>
  </ul>

CSS 测试标题，这是一个稍微有点长的标题，超出一行以后才会有title提示，标题是实现优惠券的技巧 - 2021-03-26CSS 测试标题，这是一个稍微有点长的标题，超出一行以后才会有title提示，标题是实现优惠券的技巧 - 2021-03-26

文字裁剪中间 ​

文字裁剪中间