表格自适应截字

demo

我们应该都知道使用

word-break: break-all;

让连续的英文数字字符换行显示;
以及

white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

让单行文字超出的时候使用点点点表示(Chrome目前有属性可以让多行文字点点点,且点的位置是在中间,见下2行示例代码)。

display: -webkit-box; /* height: 36px; line-height: 18px; */ -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;

但是,如果是自适应的表格中,我们要实现上面两个效果,可能就会遇到挫折,你会发现屡试不爽的方法现在完全被无视了!

例如,连续的英文字符会撑开单元格,而无视其外部的宽度设置,类似下面截图效果:

以及单行文字溢出点点点效果也会无效,因为单元格的流动性,使得文字根本就不存在溢出这种说法。

如果解决这个问题呢?实际上很简单,给最外面的table标签增加一个声明:

table-layout: fixed;

table-layout: fixed的作用在于,让表格布局固定,也就是表格的宽度不是跟随单元格内容多少自动计算尺寸。

您可以狠狠地点击这里:连续英文换行以及单行文字点点点demo

下图为demo页面表格table-layout: fixed后的效果截图:

兼容IE6+

以后,大家或多或少,或者已经开始使用表格相关display属性帮助构建web页面了,总会遇到类似的连续英文字符不换行,或者单行文字溢出没有效果的。此时,您就可以想到table-layout: fixed这厮。您可以试试:

display:table; width:100%; table-layout:fixed;

这样的固定组合解决方案。zxx.lib.css中的.cell_bk就是类似的处理。

可以应用在父容器,可以是内部子元素。

总之,希望能对遇到类似问题的人提供一点帮助,以上~感谢阅读~ 本文应该不会有人吐槽啰嗦了吧!

本文为原创文章,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知识的误导,同时有更好的阅读体验。
本文地址:http://www.zhangxinxu.com/wordpress/?p=4105

时间: 2024-10-12 16:08:18

表格自适应截字的相关文章

css文本截字,超出文本省略号显示

一.单行文本截字 p { text-overflow: ellipsis;/*显示省略号代替裁剪的文本*/ white-space: nowrap;/*空白处理方式 不换行*/ overflow: hidden;/*溢出隐藏*/ } 效果: 二.多行文本截字 p{ display:-webkit-box;/*设置盒子为弹性盒容器*/ -webkit-box-orient:vertical;/*设置盒子内部排列方式为垂直排列*/ -webkit-line-clamp:2;/*显示两行*/ text

devpress grid表格自适应列宽的问题

1 /// <summary> 2 /// 自适应列宽,显示横向滚轴,只有当所有列都已经在界面上加载完成之后才能生效 3 /// </summary> 4 public void setAutoCloumnWidth() 5 { 6 //自适应列宽 7 this.gridView.BestFitColumns(); 8 this.gridView.HorzScrollVisibility = DevExpress.XtraGrid.Views.Base.ScrollVisibili

表格自适应出横向滚动条 css

<div class="ndyqfd_table"> <div class="ndyqfd_table_box"> <ul class="ndyqfd_ul"> <li class="ndyqfd_state">得分率</li> <li class="ndyqfd_state">难易度</li> <li class=&

a标签截字

首先要给A标签设置宽度,需要把A标签变为块级元素 display:block:或者 display:inline-block: 然后设置宽度,溢出隐藏,强制不换行这几个属性. a { display: inline-block; width: 101px;  overflow: hidden;  white-space: nowrap;  text-overflow: clip; }

中文utf8截字

1.网上找的一段代码: <?php header('content-Type:text/html:charset=utf-8'); function substr_chinese($str, $start, $length = null) { return join("", array_slice( preg_split("//u", $str, -1, PREG_SPLIT_NO_EMPTY), $start, $length) ); } //实例 $str

layui 数据表格自适应高度

添加css .layui-table-cell { height: inherit; } .layui-table-cell { height: inherit;} 原文地址:https://www.cnblogs.com/jasonLiu2018/p/12074768.html

表格自动适应浏览器大小及DIV浮动设计(页面自适应浏览器大小)

一.表格自适应浏览器大小 之前写了个页面,将width和height值给定死了,这样导致浏览器缩小时,表格不会跟着自动适应浏览器大小. 解决方法: 1.一般是给表格整体使用样式:table-layout:fixed: 2.将表格中的各个单元格的width和height属性值设为比例,而不是给定值. <table style="width:100%"> <tr> <td style="width:20%">skinny cell&l

HTML5表格

1.单元格 单元格是表格的最小单位,一个或多个单元格纵横排列组成了表格. 2.行 一个或多个单元格横向堆叠形成了行. 3.列 由于表格单元格的宽度必须一致,因此单元格纵向排列形成了列. 1.表格的基本语法 <table> <tr> <th>第一个单元格的内容</th> 表格标题,字更粗 <th>第二个单元格的内容</th> ... </tr> <tr> <td>第一个单元格的内容</td>

css样式兼容不同浏览器问题解决办法

在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网站,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所有浏览器 通用 height: 100px; IE6 专用 _height: 100px; IE6 专用 *height: 100px; IE7 专用 *+height: 100px; IE7.FF 共用 height: 100px !important; 一.CSS HACK 1, !important