有时候表格会因为内容多少忽大忽小的很烦人,在网上搜了下解决方案,效果不错哦,给大家分享下!
首先介绍两个利器:
table-layout:fixed //固定表格大小
word-break:break-all;//字符串自动换行
 
注意:IE和firefox是有很大区别的!(我就是栽在这个上面了,⊙﹏⊙b汗)
1. (IE浏览器)使用 table-layout:fixed;强制table的宽度,多余内容隐藏
<table style="table-layout:fixed" width="200">
 
2.(IE浏览器)使用 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
 
3.(Firefox浏览器)连续的英文字符和阿拉伯数字的断行,Firefox的所有版本的没有解决这个问题,我们只有让超出边界的字符隐藏或者,给容器添加滚动条
 
4.(Firefox浏览器)使用 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>

html表格内容自动换行的更多相关文章

  1. table表格td内内容自动换行

    项目开发时,遇到问题:td内传入数据,全是字母,不会自动换行 一般字母数字/特殊符号的话,会被浏览器默认是一个字符串或者说一个单词,不会自动换行 所以需要设置一下,让表格内容自动换行. 1.给td标签 ...

  2. DIV的内容自动换行

    word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行. 它们的区别就在于: 1,word-break:break-all 例如div宽 ...

  3. css中设置table中的td内容自动换行

    word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行. 它们的区别就在于: 1,word-break:break-all 例如div宽 ...

  4. php网址显示excel表格内容

    /** * excel表格内容在网页中显示 * * 首先需要下载PHPExcel 工具包 * 网址: http://phpexcel.codeplex.com/releases/view/119187 ...

  5. 转!!Java JTable 根据表格内容 自动调整表格列宽

    //根据表格内容 自动调整列宽http://blog.sina.com.cn/s/blog_5e54d6140100s1d3.html

  6. 使pre的内容自动换行

    <pre> 元素可定义预格式化的文本.被包围在 pre 元素中的文本通常会保留空格和换行符.而文本也会呈现为等宽字体. <pre> 标签的一个常见应用就是用来表示计算机的源代码 ...

  7. [HTML Q&A][转]使pre的内容自动换行

    <pre> 元素可定义预格式化的文本.被包围在 pre 元素中的文本通常会保留空格和换行符.而文本也会呈现为等宽字体. <pre> 标签的一个常见应用就是用来表示计算机的源代码 ...

  8. JXL解析Excel表格内容到数据库

    java中常用的解析Excel表格的工具一种是POI一种是JXL,POI功能强大,相比JXL稍嫌复杂,对表格样式的处理非常好:而JXL解析简单方便,对中文支持比较好. 工作中解析Excel内容上传到数 ...

  9. python读取word表格内容(1)

    1.首页介绍下word表格内容,实例如下: 每两个表格后面是一个合并的单元格

随机推荐

  1. Java利用Redis实现消息队列

    应用场景 为什么要用redis?二进制存储.java序列化传输.IO连接数高.连接频繁 一.序列化 这里编写了一个java序列化的工具,主要是将对象转化为byte数组,和根据byte数组反序列化成ja ...

  2. ssh自动登录(免密)

    创建公钥 1 ssh-keygen -t rsa 无视它出来的任何提示,欢快的一路回车到底吧~ 把公钥复制到远程主机 把公钥id_rsa.pub复制到远程机器的 /home/username/.ssh ...

  3. 初识 Fuzzing 工具 WinAFL

    转:https://paper.seebug.org/323/ 初识 Fuzzing 工具 WinAFL 作者:xd0ol1(知道创宇404实验室) 0 引子 本文前两节将简要讨论 fuzzing 的 ...

  4. python爬虫实战(三)--------搜狗微信文章(IP代理池和用户代理池设定----scrapy)

    在学习scrapy爬虫框架中,肯定会涉及到IP代理池和User-Agent池的设定,规避网站的反爬. 这两天在看一个关于搜狗微信文章爬取的视频,里面有讲到ip代理池和用户代理池,在此结合自身的所了解的 ...

  5. Bzoj2510 弱题(矩阵快速幂)

    题面(权限题) 题解 一道概率\(dp\),可以设\(f[i][j]\)表示第\(i\)次操作后,标号为\(j\)的小球的期望个数,那么有: \[ \begin{aligned} &f[i][ ...

  6. Vue 2.0学习(六)内置指令

    基本指令 1.v-cloak v-cloak不需要表达式,它会在Vue实例结束编译时从绑定的HTML元素上移除,经常和CSS的display:none配合使用. <div id="ap ...

  7. margin padding 图

  8. C和指针之学习笔记(6)

    第17章 经典数据结构类型 堆栈 堆栈接口提供三种基本的操作:push.pop 和 top. Push:把一个新值压入到堆栈的顶部. Pop: 只把顶部元素从堆栈中移除,它并不返回这个值. Top: ...

  9. luoguP4115 QTREE4 链分治

    具体看$qzc$论文吧......陈年老物了...... 主要注意每个链头一棵线段树而不是一棵全局线段树 修改操作写完就是正确的,反而是初始化调了好一会...... 跑的还是很快的,有些地方没优化常数 ...

  10. [NC13B]贝伦卡斯泰露/[51Nod1400]序列分解

    [NC13B]贝伦卡斯泰露/[51Nod1400]序列分解 题目大意: 给定\(A_{1\sim n}(n\le40)\),问是否能将\(A\)分解成两个相同的子序列? 思路: 折半搜索.时间复杂度\ ...