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

小灰灰 2023-07-04 06:23 12阅读 0赞

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

**看如下就是使用flex布局的**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70]

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

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200209120235124.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw,size_16,color_FFFFFF,t_70