解决table不能换行的问题与CSS之自动换行总结
table不能换行问题 一般是:一行里面全是数字或是字母或者结尾有多个感叹号而导致 table不能换行,中文默认的会自动换行的,字母不能换行问题:
style="table-layout:fixed; word-break: break-all; overflow:hidden;"
复制代码在单元格属性里加入上面这句,如:
<td style="table-layout:fixed; word-break: break-all; overflow:hidden;">
复制代码用表格做网页排版的时候,一般都能正常使用。偏偏有时会碰到一段连续的英文词或者一堆感叹号(!!!)把网页就撑开的现象。
总结了一下,只要在CSS中定义了如下句子,可保网页不会再被撑开了。
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法
对于div,p等块级元素
正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行
html
<div id="wrap">正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义</div>
css
#wrap{white-space:normal; width:200px; }
IE浏览器
连续的英文字符和阿拉伯数字,使用word-wrap: break-word ;或者word-break:break-all;实现强制断行
html
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
css
#wrap{word-break:break-all; width:200px;}
或者
#wrap{word-wrap:break-word; width:200px;}
Firefox浏览器
连续的英文字符和阿拉伯数字的断行,Firefox的所有版本的没有解决这个问题,我们只有让超出边界的字符隐藏或者,给容器添加滚动条
html
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
css
#wrap{word-break:break-all; width:200px; overflow:auto;}
对于table元素
IE浏览器
1. 使用 table-layout:fixed;强制table的宽度,多余内容隐藏<table style="table-layout:fixed" width="200"><tr><td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td></tr></table>
复制代码2. 使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行 <table width="200" style="table-layout:fixed;"><tr><td width="25%" style="word-break : break-all; ">abcdefghigklmnopqrstuvwxyz 1234567890</td><td style="word-wrap : break-word ;">abcdefghigklmnopqrstuvwxyz 1234567890</td></tr></table>
复制代码3.在td,th中嵌套div,p等采用上面提到的div,p的换行方法
Firefox浏览器
1. 使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行,使用overflow:hidden;隐藏超出内,这里overflow:auto;无法起作用<table style="table-layout:fixed" width="200"><tr>
<td width="25%" style="word-break : break-all; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
<td width="75%" style="word-wrap : break-word; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
</tr></table>
复制代码2.在td,th中嵌套div,p等采用上面提到的对付Firefox的方法。
最佳CSS定义换行代码.wrap { table-layout:fixed; word-break: break-all; overflow:hidden; }
复制代码当然,这种现象出现的几率很小,但是不能排除网友的恶搞。
解决table不能换行的问题与CSS之自动换行总结的更多相关文章
- CSS样式自动换行(强制换行)与强制不换行
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法 对于div,p等块级元素,正常文字的换行(亚洲文字和非亚洲文字)元素拥 ...
- 解决Table不继承父节点的属性的方法
解决Table不继承父节点的属性的方法 发现table不继承父节点的属性. 解决方法:给html文件加上<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...
- 解决table插入tr错位
table中用JavaScript插入隐藏(即display="none";)的tr时,别用display="block";换成display="&q ...
- CSS3解决字母不换行的方法
CSS3解决字母不换行的方法 <pre>word-wrap: break-word;</pre>
- arcgis api 3.x for js 解决 textSymbol 文本换行显示(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- 使用INDY解决BASE64回车换行问题
使用INDY解决BASE64回车换行问题 使用DELPHI EncodeStream(),对流数据进行BASE64编译以后,每隔75个字符,就会添加回车换行符(#$D#$A),这会造成许多问题. 网上 ...
- 用css解决table文字溢出控制td显示字数
场景: 最左边这栏我不行让他换行,怎么办呢? 下面是解决办法: table{ width:100px; table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义 ...
- 用css解决table文字溢出控制td显示字数(转)
场景: 最左边这栏我不行让他换行,怎么办呢? 下面是解决办法: table{ width:100px; table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义 ...
- 解决table td里面长串数字或字母不换行的问题
在html中,经常要用到table标签,一般情况下,table下面的td元素里的东西都是汉字或者说是汉字.字母.数字的混合,在这种情况下,不设置table的宽度,也就是table宽度自适应的时候,浏览 ...
随机推荐
- 【CSS】其他CSS属性和特性
1. 设置元素的颜色和透明度 前面有介绍CSS颜色的各种用法,如 background-color属性.boder-color属性等.还有另外两个与颜色有关的属性. 1.1 设置前景色 color属性 ...
- HIbernate二级缓存
一.定义: 二级缓存是进程或集群范围内的缓存,可以被所有的Session共享,是可配置的插件 二.二级缓存原理图 解析:每次从二级缓存中取出的对象,都是一个新的对象. 三.配置步骤如下: 同理:以员工 ...
- AC日记——苹果树 codevs 1228
1228 苹果树 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 钻石 Diamond 题解 查看运行结果 题目描述 Description 在卡卡的房子外面,有一棵 ...
- iOS重一些常用的代理模式
(一)代理模式 应用场景:当一个类的某些功能需要由别的类来实现,但是又不确定具体会是哪个类实现.优势:解耦合敏捷原则:开放-封闭原则实例:tableview的 数据源delegate,通过和proto ...
- c语言函数
听着函数这两个字多多少少都会觉得有点复杂吧.因为一想到函数大多数人都会想到f(x),但其实c语言里面的函数不是那样的,老师教了一个很好的理解方法函数就是个机器人,而这个机器人是你自己做出来的.所有不用 ...
- SqlMetal.exe ORM代码生成
作甚? 先说说这个工具是干啥的,我们所做的程序,或多或少需要存储一些数据到数据库,当然直接使用Sql语句也可以,甚至有些情况下就是要使用sql语句,但对于一些基本的增删改查,对每张表都要写查询语句就显 ...
- jquery submit() 提交失败
今天写一个表单提交 居然走到$('#wechat_form').submit() 这,但怎么都没有提交这个表单 google 了一下 Additional Notes:Forms and their ...
- JavaScript之命名空间模式 浅析
来源于:http://www.cnblogs.com/syfwhu/p/4885628.html 前言 命名空间可以被认为是唯一标识符下代码的逻辑分组.为什么会出现命名空间这一概念呢?因为可用的单词数 ...
- sys
sys.argv 命令行参数List,第一个元素是程序本身路径 sys.exit(n) 退出程序,正常退出时exit(0) sys.version 获取Python解释程序的版本信息 sys.maxi ...
- TCP/IP协议
1.为什么有了IP地址还需要MAC地址? 首先,数据或者信息在网络上的传输需要两个地址:目的地址和下一跳地址.其中IP地址就是目的地址,而MAC地址则是下一跳地址.目的地址在经过路由器转发的时候是不会 ...