关于前端页面设置省略号ellipsis有时候无效的问题

当内容超过宽度时，禁止换行，使用省略号...代替溢出的内容，一般这样的需求都会经常遇到。

使用css的text-overflow: ellipsis属性，可设置省略号，需要注意的是：1. 如果设置了display: flex，则换行无效。2. 一定要设置宽度

根据标签层级不同，设置省略号的css样式也不同，下面分为几种场景：

 

场景1：普通场景

代码如下：

?

1 2 3 4 5 6 7 8 9 10

// html部分 <div class="content">文本文本文本文本文本文本</div>   // css部分 .content {     width: 200px;     white-space: nowrap;     overflow: hidden;     text-overflow: ellipsis; }

 

场景2：

父级使用display: flex，那么子级.text设置了flex: 1就是设置了一个宽度，换行有效。

代码如下：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

// html部分 <div class="name">   <div class="label">姓名</div>   <div class="text">文本文本文本文本文本文本文本文本文本文本文本文本</div> </div>   // css部分 .name {   display: flex;   .label {     width: 140px;   }   .text {       flex: 1;       text-overflow: ellipsis;       white-space: nowrap;       overflow: hidden;    } }

 

场景3：

.text里面有一层子级元素.text1

如果在.text设置换行样式，是无效的。此时.text相当于.text1的父级了，所以.text只需要设置宽度，.text1设置换行样式。

方式1：若确定了.label的宽度，则设置父级.text的宽度，如：width: calc(100% - 140px); 

方式2：若不确定.label的宽度，则设置父级.text的flex和overflow即可：如：flex: 1; overflow: hidden;

然后子级.text1直接设置换行样式即可。

代码如下：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

// html部分 <div class="name">   <div class="label">姓名</view>   <div class="text"><div class="text1">文本文本文本文本文本文本文本文本文本文本</div></div> </div>   // css部分 .name {   display: flex;   .label {     width: 140px;   }   .text {     // 方式1，使用width，前提是确定了.label的宽度     // width: calc(100% - 140px);           // 方式2：flex和overflow同时设置，.label的宽度不确定（推荐）     flex: 1;     overflow: hidden;           .text1 {              text-overflow: ellipsis;         white-space: nowrap;         overflow: hidden;     }   } }

　　

场景4（场景3的升级版）：

在场景3的基础上，还有一层外层包裹着，这通常是一个组件，就需要使用到js改变内联样式，方式同场景3的方式2

代码如下：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

// html部分 // 父组件 <div class="form" style="display: flex;"> 　<div class="form-label" style="width: 140px;"></div> 　<div class="form-content" style="flex: 1;">     <child /> 　</div> </div> // 子组件child <div class="name" id="name">   <div class="text">文本文本文本文本文本文本文本文本文本文本</div> </div>   // script部分 document.getElementById('name').style.overflow = 'hidden';   // css部分 .name {   .text {         text-overflow: ellipsis;         white-space: nowrap;         overflow: hidden;      } }