文档章节

div、p、td 的强制不换行及强制换行

王超
 王超
发布于 2014/03/20 09:32
字数 1490
阅读 1098
收藏 3

关于强制不换行、强制换行的话题在网上已经被讨论了无数次,但我发现都不够全面,没有充分考虑各种浏览器、各种标签等情况,以致不兼容,所以我再来说说。由于 div 和 p 在本文的讨论中,效果相同,所以省略 p。 
文中“没有指定宽度的 td”是指:为 table 指定了宽度,但没有给 td 指定宽度。 
强制不换行 
div, 
td 

    white-space:nowrap; 

这点在 Firefox 的 div 和 td 中,以及 IE 的 div 中,均没有问题。在 IE 的 td 中却很复杂: 
如果没有为 td 指定宽度,则上述代码仍然有效。  
如果为 td 指定了宽度,并且文字中无标点、无空格,上述代码不再有效。可以加 word-break:keep-all; 解决,这是 CSS3 的内容,不过是 IE 最先提出的,所以 IE6 中也支持。  
如果为 td 指定了宽度,并且文字中有标点或空格。可以在文字与 td 之间套一层 div 加以解决。 
综合起来,为了简单,使用: 
div 

    white-space:nowrap; 

只是为了兼容 IE 的 td 的不同情况,在文字与 td 之间套一层 div。 
强制换行 
强制换行是为了遇到一些超长的连续字符串(比如 aaaaaaaaaaaaa)时不撑大布局。 
div, 
td 

    word-break:break-all; 

word-wrap:break-word; 兼容性不够广,所以我们使用的是 word-break:break-all;。上述代码兼容于 IE、Chrome 的 div、指定宽度的 td、没有指定宽度的 td,非常不错,遗憾的是 Firefox 中不支持这个属性,所以无效果,为了不让其挤乱表格,可以加 overflow:hidden 来凑合着解决。 
知其然知其所以然 
上面介绍了三种属性: 
white-space : normal | nowrap  
word-wrap : normal | break-word  
word-break : normal | break-all | keep-all 
white-space 
空白的处理方式,不止两个属性值,但在 IE6 中只支持这两个,所以不介绍其他的。 
normal 多个连续英文空格压缩为一个英文空格显示,在空白处可换行。  
nowrap 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象。 
word-wrap 
内容超过容器边界时是否断开转行。 
normal 允许(只是允许,不是必须)内容顶开指定的容器边界。  
break-word 内容将在边界内换行。 
word-break 
换行的方式。 
normal 英文在标点和空白处换行,中文在任何地方换行。  
break-all 英文和中文都在任何地方换行,比如从一个英文单词的中间拆开换行。  
keep-all 英文和中文都在标点和空白处换行。 
用css控制td强制换行 2008-10-23 16:11 即便是给td限定的宽度,但是如果里面的内容是连续的,IE就认为是一个单词,不会换行。控制td换行的css样式:style="word-wrap:break-word;word- break:break-all;" 
1<table width="100%" border="0" cellspacing="1" cellpadding="0">        
2 <tr> 
3  <td width="25%" style="word-wrap:break-word;word-break:break-all;"   valign="bottom" > 
4 文本测试信息文本测试信息文本测试信息文本测试信息文本测试信息文本测试信息文本测试信息文本测试信息文本测试信息文本测试信息文本测试信息文本测试信息文本测试信息文本测试信息文本测试信息文本测试信息文本测试信息文本测试信息文本测试信息</td> 
5 </tr> 
6</table>
解决长串英文字母不能自动换行的问题和td中汉字自动换行 & CSS强制不换行 
编程心得   2009-10-15 10:24   阅读85   评论0   字号: 大大  中中  小小 例如:aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa不能处理自动换行,将表格伸的很长很长,而汉字字符却可以自动换行。 
原因是: 
英文字母之间如果没有空格,系统认为是一个单词,就不会自动换行。汉字就没有这种情况。 
解决办法: 
用表格把要显示的内容装起来。 
在<table>标签中加入“style='TABLE-LAYOUT: fixed'”, 
在需要强制单词换行的<td>标签中加入“style='word-WRAP: break-word'”。 
这样就可以了。 
      Div 中 :   
div 实现长英文字母自动换行CSS 
IE浏览器 
#wrap{white-space:normal; width:200px; } 
或者 
#wrap{word-break:break-all;width:200px;} 
Firefox浏览器 
#wrap{white-space:normal; width:200px; overflow:auto;} 
或者 
#wrap{word-break:break-all;width:200px; overflow:auto; } 
2、不设置单元格宽度,但汉字会自动换行: 
      解决方法: <table style='word-break:keep-all'> 
CSS强制不换行 
word-break属性, keep-all;不换行。。     IE7和FF   , IE6 不行。。 
white-space: nowrap;        IE6 及一下版本 
顺便写下语法: 
语法: 
white-space : normal | pre | nowrap  
取值: 
normal   : 默认值。默认处理方式。文本自动处理换行。假如抵达容器边界内容会转到下一行  
pre   : 换行和其他空白字符都将受到保护。这个值需要IE6+或者 !DOCTYPE 声明为 standards-compliant mode 支持。如果 !DOCTYPE 声明没有指定为 standards-compliant mode ,此属性可以使用,但是不会发生作用。结果等同于 normal 。参阅 pre 对象  
nowrap   : 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象。参阅 noWrap 属性  
说明: 
设置或检索对象内空格字符的处理方式。 
空格字符,像换行,空格,TAB,在HTML文档中默认的是被忽略的。当此属性设置为 normal 或者 nowrap 时,你可以使用不换行空格的命名实体    来添加空格,用 br 元素来添加换行。此属性对你使用文档对象模型(DOM)操作的内容的影响与其对IE显示内容的影响一样。 
此属性作用于块对象。 
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。 
对应的脚本特性为 whiteSpace 。

本文转载自:

共有 人打赏支持
王超
粉丝 1
博文 16
码字总数 1259
作品 0
西安
后端工程师
私信 提问
页面数据展示的太长,怎么让他自动换行

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

元来元去
2010/11/22
0
0
不同浏览器下word-wrap,word-break,white-space强制换行和不换行总结

强制换行与强制不换行用到的属性 我们一般控制换行所用到的CSS属性一共有三个:word-wrap; word-break; white-space。这三个属性可以说是专为了文字断行而创造出来的。首先我们得知道这三个属...

BothEyes1993
12/07
0
0
[css] table-layout:fixed 属性的解说,IE、Firefox效果对比详解

table-layout:fixed 属性的解说 如果想要一个table固定大小,里面的文字强制换行(尤其是在一长串英文文本,并且中间无空格分隔的情 况下),以达到使过长的文字不撑破表格的目的,一般是使用样...

Dicky
2011/12/07
0
0
web前端初学者必看css技巧规范(转)

1、善用css缩写可以减少页面文件大小,提高下载速度,同时使代码简洁可读。 如: 1. border-top:1px solid #cccccc; border-left:1px solid #cccccc; border-right:1px soli #cccccc; borde...

乐派电影
2014/01/11
0
2
IE6 中,如何令 table 、td 内的 pre 内容在容器边缘强制自动换行?

我在表格的单元格里有个 pre ,形如:   ……        ……      长长长长长的字符串     ……      …… 我已经定义了如下 CSS : pre {   white-space: pre-wrap;  ...

自由狼-台风
2015/03/17
196
0

没有更多内容

加载失败,请刷新页面

加载更多

node.js学习笔记之koa框架和简单爬虫练习

Koa -- 基于 Node.js 平台的下一代 web 开发框架 koa是由 Express 原班人马打造的,致力于成为一个更小、更富有表现力、更健壮的 Web 框架。 使用 koa 编写 web 应用,可以免除重复繁琐的回调...

前端小攻略
18分钟前
3
0
JavaScript中的继承及实现代码

JS虽然不像是JAVA那种强类型的语言,但也有着与JAVA类型的继承属性,那么JS中的继承是如何实现的呢? 一、构造函数继承 在构造函数中,同样属于两个新创建的函数,也是不相等的 function Fn...

peakedness丶
40分钟前
3
0
记一次面试最常见的10个Redis"刁难"问题

导读:在程序员面试过程中Redis相关的知识是常被问到的话题。作为一名在互联网技术行业打击过成百上千名的资深技术面试官,本文作者总结了面试过程中经常问到的问题。十分值得一读。 Redis在...

小刀爱编程
53分钟前
16
0
TiDB Lab 诞生记 | TiDB Hackathon 优秀项目分享

本文由红凤凰粉凤凰粉红凤凰队的成员主笔,他们的项目 TiDB Lab 在本届 TiDB Hackathon 2018 中获得了二等奖。TiDB Lab 为 TiDB 培训体系增加了一个可以动态观测 TiDB / TiKV / PD 细节的动画...

TiDB
今天
4
0
当区块链遇到零知识证明

本文由云+社区发表 当区块链遇到零知识证明 什么是零知识证明 零知识证明的官方定义是能够在不向验证者任何有用的信息的情况下,使验证者相信某个论断是正确的。这个定义有点抽象,下面笔者举...

腾讯云加社区
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部