通过css设置菜单显示滚动条不换行

<view class="orderManage-header-ul">
				<template v-for="item in orderStateList">
					<view class="orderManage-header-li" :class="{ currentStyle: currentState == item.code }" :key="item.id" @click="chooseOrderStateHandle(item.code)">
						<text>{{ item.name }}</text>
						<text class="tab-line" v-if="currentState == item.code"></text>
					</view>
				</template>
			</view>

data() {
		return {
			currentState: '0',
			orderStateList: [
				{
					id: 0,
					name: '全部',
					code: '0'
				},
				{
					id: 1,
					name: '待付订单',
					code: '1'
				},
				{
					id: 2,
					name: '已全额支付',
					code: '2'
				},
				{
					id: 3,
					name: '待收货',
					code: '3'
				},
				{
					id: 4,
					name: '已收货',
					code: '4'
				},
				{
					id: 5,
					name: '退款',
					code: '5'
				}
			]
		};
	},

.orderManage-header-ul {
		width: 91.47%;
		height: 60px;
		margin: auto;
		//滚动效果代码-start 
		display: flex;
		flex-direction: row;
		overflow-x: auto;
		white-space: nowrap;
		//滚动效果代码-end 
		.orderManage-header-li {
			height: 45px;
			font-size: 15px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			margin-top: 8px;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-right: 11px;
		}
		.currentStyle {
			font-size: 17px;
			font-family: Helvetica-Bold, Helvetica;
			font-weight: bold;
			color: #ffffff;
		}
		.tab-line {
			width: 20px;
			height: 4px;
			background: #ec4e4e;
			border-radius: 2px;
			margin-top: 11px;
		}
	}