html如何根据tr自动换行,css实现表格td 自动换行样式
自动换行最简单的做法就是直接使用 word-wrap: break-word;word-break:break-all;了,这种对于ie浏览器是兼容的,但对于ff或其它浏览器好像有问题,下面一起来看看。
给长地址的单元格应用样式: 代码如下 复制代码
word-wrap: break-word;word-break:break-all;
对于div
1.(IE浏览器)white-space:normal; word-break:break-all;这里前者是遵循标准。 代码如下 复制代码
#wrap{white-space:normal; width:200px; }
或者
#wrap{word-break:break-all;width:200px;}
效果:可以实现换行
2.(Firefox浏览器)white-space:normal; word-break:break-all;overflow:hidden;同样的FF下也没有很好的实现方法,只能隐藏或者加滚动条,当然不加滚动条效果更好! 代码如下 复制代码
#wrap{white-space:normal; width:200px; overflow:auto;}
或者
#wrap{word-break:break-all;width:200px; overflow:auto; }
效果:容器正常,内容隐藏
对于table
1. (IE浏览器)使用样式table-layout:fixed; 代码如下 复制代码
.tb{table-layout:fixed}
abcdefghigklmnopqrstuvwxyz 1234567890 |
效果:可以换行
2.(IE浏览器)使用样式table-layout:fixed与nowrap 代码如下 复制代码
.tb {table-layout:fixed}
abcdefghigklmnopqrstuvwxyz 1234567890 |
效果:可以换行
3. (IE浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap 代码如下 复制代码
.tb{table-layout:fixed}
abcdefghigklmnopqrstuvwxyz 1234567890 | abcdefghigklmnopqrstuvwxyz 1234567890 |
效果:两个td均正常换行
3.(Firefox浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixed与nowrap,并且使用div 代码如下 复制代码
.tb {table-layout:fixed}
.td {overflow:hidden;}
abcdefghigklmnopqrstuvwxyz 1234567890
|
abcdefghigklmnopqrstuvwxyz 1234567890
|
这里单元格宽度一定要用百分比定义
效果:正常显示,但不能换行(注:在FF下还没有能使容器内容换行的好方法,只能用overflow将多出的内容隐藏,以免影响整体效果)
CSS样式解决英文换行断词问题 代码如下 复制代码
* {word-wrap : break-word ;word-break : break-all ;}
/*word-wrap是控制换行的。
使用break-word时,是将强制换行。中文没有任何问题,英文语句也没问题。但是对于长串的英文,就不起作用。
break-word是控制是否断词的。
normal是默认情况,英文单词不被拆开。
break-all,是断开单词。在单词到边界时,下个字母自动到下一行。主要解决了长串英文的问题。
keep-all,是指Chinese, Japanese, and Korean不断词。即只用此时,不用word-wrap,中文就不会换行了。(英文语句正常。)
ie下:
使用word-wrap:break-word;所有的都正常。
好了到了最后我们的td 自动换行也就分析完了,主要是针对表格与针对div与兼容性进行了一些分析,最后发现这个兼职那个不兼容了,是一个头痛的事情。
html如何根据tr自动换行,css实现表格td 自动换行样式相关推荐
- html 英文自动换行,CSS让英文单词的自动换行
在制作网页过程中,css样式编写中,可能会遇到文字换行的问题,其中英文换行可能会困扰着很多初学者,而今天我就这个问题进行相应的阐述,学过css的朋友应该都知道,控制文字是否换行可以直接使用css中的w ...
- html%3ctd%3e文本自动换行,如何在表格中自动换行一列,并将表格大小设置为浏览器窗口...
我有一个带有3个"组"的HTML表格,左侧,中间和右侧.如何在表格中自动换行一列,并将表格大小设置为浏览器窗口 +--------------------------------- ...
- html怎样让文字自动换行,CSS怎么设置文字自动换行?
CSS怎么设置文字自动换行?下面本篇文章就给大家介绍css设置文字(特别是连续的数字和英文)自动换行的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 关于换行问题,正常字符的换 ...
- html flex自动换行,css flex布局超长自动换行的示例代码
要创建一个 flex 容器,只需要将一个 display: flex 属性添加到一个元素上. 默认情况下,所有的直接子元素都被认为是 flex 项,并从左到右依次排列在一行中. 如果 flex 项的宽 ...
- css设置表格内容自动换行
换行是指在文字或者其他内容到达行末时,自动转到下一行的行为.在网页设计中,正确的换行可以使页面看起来更加舒适和自然.在CSS中,实现正确的换行需要了解一些原理和技巧.本文将为您介绍如何使用CSS实现换 ...
- CSS - 使表格td中的文字垂直居中
文字垂直居中的有如下的方法 方法一: valign:middle // 不推荐使用 代码如下: <table> <tbody> <tr> <td valig ...
- html表格怎么取消自动换行,css怎么控制表格不要自动换行?
很多时候,我们在项目开发中会出现,单元格内容由于太多导致的换行问题,让表格显得非常的丑陋.下面我们就来看一下css控制表格不自动换行的方法. 我们可以通过为表格添加white-space:nowrap ...
- css文字超出宽度自动换行
CSS文字超出宽度自动换行[转] word-wrap:break-word; word-break:break-all; overflow: hidden;/*这个参数根据需求来决定要不要*/ 目录 ...
- html css 表头,css固定表格表头(各浏览器通用)
固定表格表头 div{ overflow-y: scroll; overflow-x: hidden; height: 100px; margin-top: 5px; margin-left: 12p ...
- 解决长email在表格td中不自动换行的问题 CSS强制不换行
例如: aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa@gmail.com 不能处理自动换行,将表格伸的很长很长,而汉字字符却可以自动换行. 原因是: 英 ...
最新文章
- cannot find package “github.com/coreos/go-systemd/journal”
- java se13安装教程_在Linux发行版中安装Java 13/OpenJDK 13的方法
- 【转】Bresenham快速画直线算法
- 一个1990年代的小故事
- 6.Android的学习(Intent跳转页面,活动之间传递数据)
- java泛型中的标记,Java泛型中的标记符含义
- 大数据,大格局,大发展
- 访问数据库_Lua 数据库访问
- python多级字典_Python多层字典取值
- 云联惠身份认证需要多长时间_欧盟REACH认证需要多长时间【周期、费用、有效期】...
- Python 基础 函数
- C#调用Matlab生成的dll方法
- 2011 端午后,杭州支付宝
- Junit Eclemma Eclipse
- 计算机专业考试系统,计算机基础考试系统
- 非华为电脑安装华为电脑管家11的方法,华为应用商店和华为浏览器电脑版
- 在尘世间做最好的自己
- swoole php配置文件,EasySwoole分离配置文件
- c语言面试(c语言面试基础知识)
- 《我杀了他》凶手推导
热门文章
- [hiho1160] 攻城略地
- OC学习3——C语言特性之指针
- 页面指令JSP常见的指令有哪些?(面试必备)
- MFC 的几个常用函数,用来计算文件大小,下载速度,转换时间的
- 双色球机器学习线性回归蓝球预测案例
- 部分网站为什么上不去_天机SEO:分析网站收录与排名的重要因素
- python九九乘法表矩形_用Python实现九九乘法表
- 拓端tecdat|R语言GGPLOT2绘制圆环图雷达图/星形图/极坐标图/径向图Polar Chart可视化分析汽车性能数据
- 拓端tecdat|R语言POT超阈值模型在洪水风险频率分析中的应用研究
- input换行输入_小白也能学的Python基础语法-变量与输入和输出