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;
加油,我是最胖的,哈哈哈
下一篇: 前端小白--css样式知多少I