overflow: hidden;/*和text-overflow: ellipsis;成对出现*/
white-space: nowrap;/*不换行显示*/
text-overflow: ellipsis;/*超出给定宽度的部分，文字以省略号...显示*/

事例1：标题只展示一行，超出一行的部分用省略号代替。div水平居中

<div class="companyName">
      <span style="text-align:center;font-size:17px;width: 80%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" class="name">珍惜今日，努力将来，过去种种，且忘记它，午夜梦回，如有记忆浮沉，转个身，再睡。</span>
     <span class="makeSure">已认证</span>
</div>

效果截图

image.png

事例2：标题只展示一行，超出一行的部分用省略号代替。右侧的收益div垂直居中

理想效果

  <style>
section{
      padding: 0 12px;
      background-color: white;
    }
.bgDiv{
      display: flex;
      width: 100%;
      height: 70px;
      background-color: white;

      justify-content: space-between;
      align-items: center;


    }
.leftDiv{

      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 16px;

    }
    .rightDiv{
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: transparent;
      font-size:16px;
      color:#333333;

    }
  .bootmLine{
      border-bottom: #eaebeb;
      font-size:13px;
      border-bottom-width: 1px;
      border-bottom-style: solid;
    }
  .fontSize16{
      font-size:16px;
      color:#333333;
    
    }
    .fontSize13{
      font-size:13px;
      color:#808080;

    }

</style>

  <div class= "inComeClass">
    <section >
      <div class="bgDiv bootmLine">
        <div class="leftDiv ">我是一段很长的文字，我是一段很长的文字，我是一段很长的文字，我是一段很长的文字，我是一段很长的文字
          <div class="fontSize13">2081-08-21</div>
        </div>
        <div class="rightDiv">
          <strong style="fontSize16">+100.00</strong>
        </div>
      </div>
    </section>

  </div>

image.png

不满足要求的效果（因为右侧的收益div不是垂直居中，和布局方式有关，即标题和收益是在一个大的div下面）

<style>
  section{
      padding: 0 12px;
      background-color: white;
    }
  .bgDiv{
      padding-top: 10px;
      font-size: 16px;
      display: flex;
      justify-content: space-between;
    }

  .bootmLine{
      border-bottom: #eaebeb;
      font-size:13px;
      border-bottom-width: 1px;
      border-bottom-style: solid;
    }

    .fontSize16{
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

  .rightDiv{
      text-align: left;
    }

  .fontSize13{
      margin-left: 5px;
      text-align: right;
    }

   .botFontSize13{
     color: #808080;
     text-align: left;
   }


</style>
  <div class= "inComeClass">
    <section >
      <div class=" bootmLine">
        <div class="bgDiv">
          <div class="fontSize16">我是一段很长的文字，我是一段很长的文字，我是一段很长的文字，我是一段很长的文字，我是一段很长的文字</div>
          <strong class="fontSize13">+100.00</strong>
        </div>
        <div class="botDiv">
          <span style="botFontSize13">2081-08-21</span>
        </div>
      </div>
    </section>
</div>

image.png

html 显示多行(两行、三行、四行、五行)内容,且超出部分以省略号显示的做法
](https://www.jianshu.com/p/792aabdb56fc)