uni-app踩坑:nvue页面中的text组件出现莫名边距

<scroll-view class="nav" :scroll-x="true"  show-scrollbar="false">
			<view class="nav-li" @click="change_active(index)" v-for="(item,index) in nav_list" :key="'nav' + index">
				<text :class="active == index?'active nav-text':'nav-text'">{{item.labelName}}</text>
				<view class="active-line" v-if="active == index">
			
				</view>
			</view>
		</scroll-view>
		<scroll-view class="nav" :scroll-x="true"  show-scrollbar="false">
			<view class="nav-li" @click="change_active(index)" v-for="(item,index) in nav_list" :key="'nav' + index">
				<text :class="active == index?'active nav-text':'nav-text'">
					{{item.labelName}}
				</text>
				<view class="active-line" v-if="active == index">
			
				</view>
			</view>
		</scroll-view>

在这里插入图片描述
两种写法不一样的结果
text组件中的文字需要和标签写在一行
否则会认为是换行,出现莫名边距
第一次写uni-app,是真的坑