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;
	}
	

網上也有很多案例，只是寫的太簡單，要花費大量時間去測試，故將自己測試後的分享有需的朋友，希望對你有用