html自动换行
对于div,p等块级元素
正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行
html
css
1.(IE浏览器)连续的英文字符和阿拉伯数字,使用word-wrap : break-word ;或者word-break:break-all;实现强制断行
或者
效果:可以实现换行
2.(Firefox浏览器)连续的英文字符和阿拉伯数字的断行,Firefox的所有版本的没有解决这个问题,我们只有让超出边界的字符隐藏或者,给容器添加滚动条
效果:容器正常,内容隐藏
对于table
1. (IE浏览器)使用 table-layout:fixed;强制table的宽度,多余内容隐藏
abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss
效果:隐藏多余内容
2.(IE浏览器)使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行
效果:可以换行
3. (IE浏览器)在td,th中嵌套div,p等采用上面提到的div,p的换行方法
4.(Firefox浏览器)使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行,使用overflow:hidden;隐藏超出内容,这里overflow:auto;无法起作用
效果:隐藏多于内容
5.(Firefox浏览器) 在td,th中嵌套div,p等采用上面提到的对付Firefox的方法
运行代码框
最后,这种现象出现的几率很小,但是不能排除网友的恶搞。如果有什么问题请到我的留言本提出
下面是提到的例子的效果
div
All white-space:normal;
IE \ word-wrap : break-word ;
IE \ word-break:break-all;
Firefox/ word-break:break-all; overflow:auto;
table
table-layout:fixed;
| abcdefghigklmnopqrstuvwxyz 1234567890 | abcdefghigklmnopqrstuvwxyz 1234567890 |
| abcdefghigklmnopqrstuvwxyz1234567890 | abcdefghigklmnopqrstuvwxyz1234567890 |
| abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss |
table-layout:fixed; word-break : break-all; word-wrap : break-word ;
| abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss | abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss |
FF \ table-layout:fixed; overflow:hidden;
| abcdefghigklmnopqrstuvwxyz1234567890 | abcdefghigklmnopqrstuvwxyz1234567890 |
html自动换行的更多相关文章
- iOS之UILabel的自动换行
思路: 获取UILabel的frame大小 获取UILabel的字体大小 获取UILabel的文本内容 根据上面的3部分数据,计算文本显示区域大小 根据4计算的大小,实时改变UILabel的frame ...
- Android自定义ViewGroup,实现自动换行
学习<Android开发艺术探索>中自定义ViewGroup章节 自定义ViewGroup总结的知识点 一.自定义ViewGroup中,onMeasure理解 onMeasure(int ...
- 解决table不能换行的问题与CSS之自动换行总结
table不能换行问题 一般是:一行里面全是数字或是字母或者结尾有多个感叹号而导致 table不能换行,中文默认的会自动换行的,字母不能换行问题:style="table-layout:fi ...
- CSS样式自动换行(强制换行)与强制不换行
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法 对于div,p等块级元素,正常文字的换行(亚洲文字和非亚洲文字)元素拥 ...
- 显示textarea内容的时候没有自动换行
显示textarea内容的时候没有自动换行,网上找了好久,在一个论坛里找到解决方法: 1.把从数据库读出来的内容存放在一个Div内,例如: <div class="new-commen ...
- css实现强制不换行/自动换行/强制换行
在我们日常的编码中经常会遇到这段文字不可以换行,或者自动换行的需求.虽然这个功能在我们平时很常见但是我相信大家一定不会可以的去记住它吧(至少小月是很懒惰的从来是用什么查什么 ♦ 嘻嘻...).今天我们 ...
- Graphics2D字符串根据文本框缩小字体自动换行
/** * *描述: 长字符串缩小字体自动换行 *@param g *@param text 字符串 *@param lineWidth 单元格宽度 *@param cellHeight 单元格高度 ...
- 自动换行(word-wrap:break-word;word-break:break-all)
word-wrap:break-word; 自动换行,不把单词拆开 word-break:break-all; 自动换行,拆开单词 white-space:nowrap; 文本不会换行,文本会在同一行 ...
- canvas文本自动换行
在用canvas中写刮奖结果的时候发现canvas中的文本不会自动折行,要进行截断另起一行来写.在此参考文章html5-canvas的绘制文本自动换行来做改写. 根据canvas宽度来做折行 在此根据 ...
- MFC CEdit 自动换行功能
最近在写一个程序,对话框上的CEdit控件需显示一串字符,字符可能比较长,要根据编辑框的宽度自动换行.控件属性中已经设置了Multiline为true.Auto VScroll为true,Virtic ...
随机推荐
- java.lang.ClassCastException: com.google.gson.internal.LinkedTreeMap cannot be cast to
在做android解析服务器传来的json时遇到的错误. 服务器传来的数据格式 [{"," id":"7ef6815938394fce88a5873312b66 ...
- mysql-oracle
1.oracle数据崩导入时部分字段数据太长导入失败:原因是两边oracle字符集不一致 https://www.cnblogs.com/baoposhou/p/5669778.html 2.orac ...
- (转) 淘淘商城系列——CMS内容管理系统工程搭建
http://blog.csdn.net/yerenyuan_pku/article/details/72825801 淘淘商城系列——CMS内容管理系统工程搭建 上文我们一起搭建了表现层中的商城门户 ...
- POI原生导入读取EXCEL
好久没用 最近项目有冲突 所以又用到了这个 谁知道以后还会不会用 先记下来吧 直接扔项目里 调方法就OK 了. 记录一下....不想再写类似这样的东西了 import org.apache.poi.h ...
- CAD使用SetxDataDouble写数据(com接口)
主要用到函数说明: MxDrawEntity::SetxDataDouble 写一个Double扩展数据,详细说明如下: 参数 说明 [in] BSTR val 字符串值 szAppName 扩展数据 ...
- C#readonly 关键字与 const 关键字的区别
1. const 字段只能在该字段的声明中初始化,readonly 字段可以在声明或构造函数中初始化.因此,根据所使用的构造函数,readonly 字段可能具有不同的值. 2. const 字段是编译 ...
- -- HTML标记大全参考手册[推荐]
-- HTML标记大全参考手册[推荐]总类(所有HTML文件都有的) 文件类型 <HTML></HTML> (放在档案的开头与结尾) 文件主题 <TITLE>&l ...
- python compare with other language
java http://dirtsimple.org/2004/12/python-is-not-java.htmlhttp://twistedmatrix.com/users/glyph/rant/ ...
- python清除字符串中无用字符
将列表val_list中包含的非法字符去掉,illegal_char是非法字符列表 def clear(): illegal_char = [' ','#','%','_','@'] tmp_list ...
- 基于PHP的微信支付教程
微信支付作为各大移动支付方式之一,本课程只要向大家介绍并使用微信支付的常用功能,进而集合到已有的项目中去,希望各位能够快速上手并掌握实战"干货". 出处至:汇智网 hubwiz. ...