主页 / 建站知识 /

关于table表格中的内容溢出布局方法

建站知识 2021-07-02 22:42www.168986.cn长沙网站建设

什么是内容溢出呢？其实就是当文字很多的时候，如果内容区域只有那么长，那么多出的部分以点点点代替。

这次做的案例是在table里面，我们知道当我们在table里输入过多的文字内容的时候会撑乱表格，例如一行显示过长或者自动换行。可是有的时候我们就想在固定宽度的一行中显示，如果多出的部分那就用点点点代替，这样就不会撑乱表格了。那么该如何做呢？

我们会用到如下属性

CSS Code复制内容到剪贴板
  1. /溢出部分样式/  
  2. .txt-ell {   
  3.     whitewhite-space:nowrap;  //强制在一行显示   
  4.     overflow:hidden;    //溢出的内容切割隐藏   
  5.     text-overflow:ellipsis; //当内联溢出块容器时，将溢出部分替换为…   
  6.     word-break:keep-all;  //允许在单词内换行   
  7.     color: red;  //这里我自己标识一下   
  8.     padding: 0 7px;  //由于想跟边线留有距离，所以设置了下   
  9. }  
CSS Code复制内容到剪贴板
  1. .table-fix {   
  2.     table-layout:fixed;     
  3. }  

第二个样式是专门给table标签加的，想要实现内容溢出，那么表格必须有固定的宽高，表格内部的tr，td也要有固定的宽高。在用内容溢出之前，先要给table添加table-fix这个类。然后检查自己的tr，td有没有给width，如果没有的话，最好是给个吧，固定的也行，百分比的也行，我主要给的百分比，外边table给固定宽度，里面的tr和td就是百分比的宽度，这样才能使用内容溢出样式。如果哪个格子里面的内容非常的多，你想实现点点点，就给这个格子添加一个.txt-ell的类吧

以上这篇关于table表格中的内容溢出布局方法就是长沙网络推广分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持狼蚁SEO。

原文地址

上一篇：如何实现textarea中获取动态剩余字数的方法 下一篇：移动端网页大小自适应的实现方法

长沙网站设计

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by