对于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. 机器学习-牛顿方法&指数分布族&GLM

    本节内容 牛顿方法 指数分布族 广义线性模型 之前学习了梯度下降方法,关于梯度下降(gradient descent),这里简单的回顾下[参考感知机学习部分提到的梯度下降(gradient desce ...

  2. Android应用开发细节点

    1.如果handler是在主线程声明,就属于主线程,handleMessage属于引用handler的那个线程:2.ByteArrayOutputStream/ByteArrayInputStream ...

  3. Sql Server中清空所有数据表中的记录

    Sql Server中清空所有数据表中的记录 清空所有数据表中的记录: 代码如下:exec sp_msforeachtable  @Command1 ='truncate table ?'删除所有数据 ...

  4. Winsock2_WSADATA

    使用Winsock2进行win下网络编程的第一步是初始化Winsock.其中需要创建一个WSADATA类型的变量,这个变量用来保存Windows socket的实现信息. typedef struct ...

  5. leetcode_919. Complete Binary Tree Inserter

    https://leetcode.com/problems/complete-binary-tree-inserter/ 设计一个CBTInserter,使用给定完全二叉树初始化.三个功能; CBTI ...

  6. Android(java)学习笔记189:ContentProvider使用(银行数据库创建和增删改查的案例)

    1. Android的四大组件: (1)Activity  用户交互的UI界面 (2)Service  后台运行的服务 (3)BroadcastReceiver 广播接收者 (4)ContentPro ...

  7. Functor、Applicative 和 Monad x

    首先,我们来看一下 Functor typeclass 的定义: 1 2 class Functor f where fmap :: (a -> b) -> f a -> f b F ...

  8. 【转】Google Chrome浏览器调试

    作为Web开发人员,我为什么喜欢Google Chrome浏览器 [原文地址:http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.ht ...

  9. PowerDesigner 操作手册

    1.错误信息:Generation aborted due to errors detected during the verification of the model 解决方案: 把检查模型的选项 ...

  10. loadrunner 响应时间和TPS

    例子:一个高速路有10个入口,每个入口每秒钟只能进1辆车 1.请问1秒钟最多能进几辆车?    TPS=10 2.每辆车需要多长时间进行响应?    reponse time = 1 3.改成20辆车 ...