欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-04-22 14:02:18
...
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;

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