The small program vant tab component solves the problem of too much text and incomplete display

When using applets , Some classification names may be too long , Lead to tab The problem of incomplete display of components will appear in the following figure .

Methods and steps

1. increase tab-class Label style class

<!-- increase tab-class Definition -->
<van-tabs tab-class="tab-class" sticky class="nav" active="{
     { active }}" bind:change="onCateChange"> 
	<van-tab wx:for="{
     {cate_list}}" wx:key="index" title="{
     {item.name}}"></van-tab>
</van-tabs>

2. Add style settings

.tab-class {
    
  flex: none !important;
}

Reference documents

tab The text is too long and incomplete