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 ...
随机推荐
- linux命令useradd添加用户
linux命令useradd添加用户详解 1.作用 useradd或adduser命令用来建立用户帐号和创建用户的起始目录,使用权限是超级用户. 2.格式 useradd [-d home] [-s ...
- Elasticsearch の 查询类型
查询类型SearchType Es中一共有四种查询类型:QUERY_AND_FETCH.QUERY_THEN_FETCH.DFS_QUERY_AND_FETCH.DFS_QUERY_THEN_FETC ...
- WPF学习- AllowDrop 用户控件启用拖放功能
知识点: 创建自定义用户控件(UserControl) 使用户控件成为拖动源 使用户控件成为放置目标 使面板能够接收从用户控件放置的数据 创建项目: 1.新建WPF项目(Wpf-AllowDrop) ...
- HTTP请求报文与响应报文格式
请求报文包含三部分: a.请求行:包含请求方法.URI.HTTP版本信息 b.请求首部字段 c.请求内容实体 响应报文包含三部分: a.状态行:包含HTTP版本.状态码.状态码的原因短语 b.响应首部 ...
- CAD设置超链接(网页版)
超链接(Hyperlink)可以看做是一个“热点”,它可以从当前Web页定义的位置跳转到其他位置. 设置对象动态提示事件回调函数. //设置对象动态提示事件回调函数 function DoInputP ...
- CAD控件使用教程 自定义实体的实现
自定义实体的实现 1 . 自定义实体... 3 1.1 说明... 3 1.2 类的类型信息... 3 1.3 worldDraw.. 4 1.4 ...
- win下配置qt creator 能够执行c/c++
首先需要相关包共四个: qt-win-opensource-4.8.5-mingw.exe qt-creator-windows-opensource-2.8.1.exe MinGW-gcc440_1 ...
- 08C#事件
C#事件 1.2 事件 事件是C#语言内置的语法,可以定义和处理事件,为使用组件编程提供了良好的基础. 1.16.1 事件驱动 Windows操作系统把用户的动作都看作消息,C# ...
- css滚动条样式修改
.activeMoreBankList{ height: 188px; overflow-y: auto;} /*滚动条样式*/.activeMoreBankList::-webkit-scrollb ...
- 在计算机中简单的hello程序的运行
我之前很好奇就是你所写的代码到底是如何在计算机中执行的,到底是怎样开始,从哪里开始,在哪里执行,到哪里结束,之间到底是怎么的一个过程,带着这些问题,逐渐看这方面的书籍,最近买的<深入理解计算机系 ...