css文本超出隐藏或者省略号代替

html：
<div class="echartBox_right" id="echartBox_right">
 <div class="echartTime">
    <span class="echartTxt echartTxt_title">时间</span>
    <span class="echartTxt" v-for="(item, index) in xData" :key="index">{
  
  { item }}</span>
  </div>
  <div class="echartNum">
    <span class="echartTxt echartTxt_title">数值</span>
    <span class="echartTxt echartTxt_num" v-for="(item, index) in yData" :key="index">99999999999999999</span>
  </div>
</div>

css:
.echartBox_right {
    display: flex;
    flex: 1;
    justify-content: center;
    width: 100%;
    padding: .05rem;
    /* height: 4rem; */
    overflow-y: scroll;
    border-left: 1px solid #656f8b;
  }
  
  .echartTime {
    display: flex;
    flex-direction: column;
    width: 50%;
    align-items: center;
    margin-right: .05rem;
  }

  .echartNum {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

无效果的，因为设置在了放在外面的盒子echartNum ，改进：

.echartNum {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.echartTxt_num {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

无效果，因为没有设置宽度（小伙伴有疑问：echartNum不是设置了flex:1吗？），宽度要设置在超出文本的盒子，最终：

.echartTxt_num {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

拓展:

word-break:break-all;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;/**显示的行数**/
overflow:hidden;

加油，我是最胖的，哈哈哈

今天的文章css文本超出隐藏或者省略号代替分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。