flex弹性布局模式下文字超出显示省略号

都知道flex弹性布局非常好用，会随分辨率不同，宽高自适，那怎么来设置在一定范围内的文字超出隐藏，显示省略号呢？其实也不难

看如下就是使用flex布局的

其实如上效果也同样离不开如下三句，只是用法不大一样罢了

		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		

不废话了直接上全代码…

html

      <div class="infect-plot">
        <div v-for="(item,index) in medicalPointData" :key="index">
          <div><p>{{item.name}}</p></div>
          <div><p>{{item.distance?item.distance+'km':''}}</p></div>
        </div>
      </div>
      

css

	.infect-plot{
		width: 100%;
		margin:12px 0px;
		font-size: 14px;
		max-height: 200px;
		overflow: hidden;
		overflow-y: scroll;
	}
	.infect-plot>div{
		height: 35px;
		display: flex;
		align-items: center;
		margin: 0px 8px;
	}
	.infect-plot>div>div{
		width: 0;
		display: flex;
		align-content: center;
		text-indent: 6px;
	}
	.infect-plot>div>div:first-of-type{
		flex: 1;
		color:#ab5b64;
	}
	.infect-plot>div>div>p{
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.infect-plot>div>div:last-of-type{
		flex: 0 60px;
		width: 60px;
		color:#ffed4c;
	}
	.infect-plot>div:nth-child(odd){
		background-color: #1b3968;
	}
	

网上也有很多案例，只是写的太简单，要花费大量时间去测试，故将自己测试后的分享有需的朋友，希望对你有用