对于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;

Wordwrap still occurs in a td element that has its WIDTH attribute set to a value smaller than the unwrapped content of the cell, even if the noWrap property is set to true. Therefore, the WIDTH attribute takes precedence over the noWrap property in this scenario

IE \ word-wrap : break-word ;

abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111

IE \ word-break:break-all;

abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111

Firefox/ word-break:break-all; overflow:auto;

abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111

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自动换行的更多相关文章

  1. iOS之UILabel的自动换行

    思路: 获取UILabel的frame大小 获取UILabel的字体大小 获取UILabel的文本内容 根据上面的3部分数据,计算文本显示区域大小 根据4计算的大小,实时改变UILabel的frame ...

  2. Android自定义ViewGroup,实现自动换行

    学习<Android开发艺术探索>中自定义ViewGroup章节 自定义ViewGroup总结的知识点 一.自定义ViewGroup中,onMeasure理解 onMeasure(int ...

  3. 解决table不能换行的问题与CSS之自动换行总结

    table不能换行问题 一般是:一行里面全是数字或是字母或者结尾有多个感叹号而导致 table不能换行,中文默认的会自动换行的,字母不能换行问题:style="table-layout:fi ...

  4. CSS样式自动换行(强制换行)与强制不换行

    自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法 对于div,p等块级元素,正常文字的换行(亚洲文字和非亚洲文字)元素拥 ...

  5. 显示textarea内容的时候没有自动换行

    显示textarea内容的时候没有自动换行,网上找了好久,在一个论坛里找到解决方法: 1.把从数据库读出来的内容存放在一个Div内,例如: <div class="new-commen ...

  6. css实现强制不换行/自动换行/强制换行

    在我们日常的编码中经常会遇到这段文字不可以换行,或者自动换行的需求.虽然这个功能在我们平时很常见但是我相信大家一定不会可以的去记住它吧(至少小月是很懒惰的从来是用什么查什么 ♦ 嘻嘻...).今天我们 ...

  7. Graphics2D字符串根据文本框缩小字体自动换行

    /** * *描述: 长字符串缩小字体自动换行 *@param g  *@param text 字符串 *@param lineWidth 单元格宽度 *@param cellHeight 单元格高度 ...

  8. 自动换行(word-wrap:break-word;word-break:break-all)

    word-wrap:break-word; 自动换行,不把单词拆开 word-break:break-all; 自动换行,拆开单词 white-space:nowrap; 文本不会换行,文本会在同一行 ...

  9. canvas文本自动换行

    在用canvas中写刮奖结果的时候发现canvas中的文本不会自动折行,要进行截断另起一行来写.在此参考文章html5-canvas的绘制文本自动换行来做改写. 根据canvas宽度来做折行 在此根据 ...

  10. MFC CEdit 自动换行功能

    最近在写一个程序,对话框上的CEdit控件需显示一串字符,字符可能比较长,要根据编辑框的宽度自动换行.控件属性中已经设置了Multiline为true.Auto VScroll为true,Virtic ...

随机推荐

  1. 对openjdk的javac编译器扩展了一个语法糖

    我的扩展功能描述如下: 在java的现有语法中加入var来声明变量,并且可以根据初始化数据来自动类型推导. 举两个例子: 例一: 如下JAVA代码(注意这里的var是新语法): import java ...

  2. Vue 拦截器的使用

    拦截器 可以全局进行拦截器设置.拦截器在发送请求前或响应返回时做一些特殊的处理. 拦截器的注册 Vue.http.interceptors.push({ request: function ( req ...

  3. 火狐删除配置文件 会删除目录下所有文件 切记不要把配置文件建立在桌面 恢复软件:易我数据恢复向导 9.0 DiskGenius500

    火狐删除配置文件 会删除目录下所有文件 切记不要把配置文件建立在桌面 恢复软件:易我数据恢复向导 9.0  DiskGenius500 结果:由于时间比较常 恢复文件均失败了~

  4. win7 命令行禁用开启usb存储

    禁用: reg add "HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\usbstor" /v Start /t reg ...

  5. vue项目设置每个页面的title

    1.在项目目录下安装vue-wechat-title 2.在main.js中 使用vue-wechat-title 3.在router的配置中设置 4.在每个vue页面中加入 <div v-we ...

  6. virtualenvwrapper.sh: There was a problem running the initialization hooks. If Python could not import the module virtualenvwrapper.hook_loader, check that virtualenvwrapper.........(解决办法)

    Linux(ubuntu)上python2与python3共存环境下,安装virtualenvwrapper后, 其环境变量被自动设置为VIRTUALENVWRAPPER_PYTHON=/usr/bi ...

  7. jQuery入门--- 非常好

    jQuery入门------https://blog.csdn.net/dkh_321/article/details/78093788

  8. 九度oj 题目1196:成绩排序

    题目1196:成绩排序 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:5192 解决:1792 题目描述: 用一维数组存储学号和成绩,然后,按成绩排序输出. 输入: 输入第一行包括一个整数 ...

  9. hdu 4465 求期望(C(m,n)太大用log优化)

    /* 坑啊 数学函数的运用log处理,exp还原 tle好长时间,一直用g++交,最后把别人正确的代码交上也是tle,用c++交一遍ac 题意:有两个数量为n的糖果,一个人开始吃,吃到最后有一堆剩余为 ...

  10. 2.3 comparator(比较器)

    1.comparator是java的一种机制,用来帮助我们给相同对象的不同属性排序 2.Comparable接口,是一个对象本身就已经支持自比较所需要实现的接口,如String,Integer自己就已 ...