对于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. 460在全志r16平台tinav3.0系统下使用i2c-tools

    460在全志r16平台tinav3.0系统下使用i2c-tools 2018/9/6 19:05 版本:V1.0 开发板:SC3817R SDK:tina v3.0 1.01原始编译全志r16平台ti ...

  2. Sql中创建事务处理

    Create Procedure MyProcedure AS Begin Set NOCOUNT ON; Set XACT_ABORT ON; --这句话非常重要 begin try Begin T ...

  3. 【PostgreSQL-9.6.3】表空间

    在PostgreSQL中,表空间实际上是为表指定一个存储目录,这样方便我们把不同的表放在不同的存储介质或者文件系统中.在创建数据库.表.索引时都可以指定表空间. 1. 创建表空间 --表空间目录必须是 ...

  4. WebSocket 的一些简单页面推送使用

    因为做通信项目的时候,需要实时获取每个分机的当前状态,发现websocket还不错,只是对浏览器的要求比较高, 针对特定用户推送消息,网上有一些 public class GetHttpSession ...

  5. 解决vue项目eslint校验 Do not use 'new' for side effects 的两种方法

    import Vue from 'vue' import App from './App.vue' import router from './router' new Vue({ el: '#app' ...

  6. 01XML文档结构

    文档结构 2.1文档结构 2.1.1文档声明及字符编码 <?xml version=“1.0” encoding=“”gb2312 standalone=“yes”?> <?  告诉 ...

  7. Python机器学习——Agglomerative层次聚类

    层次聚类(hierarchical clustering)可在不同层次上对数据集进行划分,形成树状的聚类结构.AggregativeClustering是一种常用的层次聚类算法.   其原理是:最初将 ...

  8. Python学习-初始列表

    初始列表 列表中的排放是没有顺序的并且可以被修改 在列表中你可以放入任何的元素类型.字符串,数字,布尔值等等,甚至还可以进行列表的嵌套 列表的注意特征:用中括号包围,中间用逗号分隔开 list = [ ...

  9. [Python3网络爬虫开发实战] 3.3-正则表达式

    本节中,我们看一下正则表达式的相关用法.正则表达式是处理字符串的强大工具,它有自己特定的语法结构,有了它,实现字符串的检索.替换.匹配验证都不在话下. 当然,对于爬虫来说,有了它,从HTML里提取想要 ...

  10. 零基础入门学习Python(34)--丰富的else语句及简洁的with语句

    知识点 else语句的用法: 1)配合if语句 if a>b: print(a) else: print(b) 2)配合while和for循环 只在循环完成后才执行,如果循环中执行使用到brea ...