css 内容溢出情况

内容溢出

text-overflow: ellipsis;
overflow: hidden;
display: inline-block;
width: 49px;
text-overflow: ellipsis;
overflow: hidden;

换行

在一个单元格中有内容,内容会自动撑开换行,这就导致行高不一致,所以对于操作宽度的内容,我们不让它换行(这回撑开单元格),并且让操作的部分以省略号的方式显示。
w3school white space property
在这里插入图片描述

当用户鼠标滑倒这个单元格时在显示出全部信息。html中标签都会有一个属性,title,可以用来显示完全的信息

codeopen span title显示

<span title="看到你想看的信息">鼠标放我这</span>
  <tr>
    <td title="查看我的全部信息">Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>

如在elementui中的应用

   <el-table-column
     align="center"
     label="会员标签"
   >
    <template slot-scope="scope">
      <span :title="scope.row.userTag">{{scope.row.userShowTag}}</span>
    </template>
   </el-table-column>

在这里插入图片描述

发布了121 篇原创文章 · 获赞 3 · 访问量 4152

猜你喜欢

转载自blog.csdn.net/Q10CAU/article/details/105204448