在DIV中自己主动换行

word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自己主动换行。

它们的差别就在于:

1,word-break:break-all 比如div宽200px,它的内容就会到200px自己主动换行,假设该行末端有个英文单词非常长(congratulation等),它会把单词截断,变成该行末端为conra(congratulation的前端部分),下一行为tulation(conguatulation)的后端部分了。

2。word-wrap:break-word 样例与上面一样,但差别就是它会把congratulation整个单词看成一个总体,假设该行末端宽度不够显示整个单词,它会自己主动把整个单词放到下一行,而不会把单词截断掉的。

3。word-break;break-all 支持版本号:IE5以上 该行为与亚洲语言的 normal 同样。也同意非亚洲语言文本行的随意字内断开。该值适合包括一些非亚洲文本的亚洲文本。 WORD-WRAP:break-word 支持版本号:IE5.5以上 内容将在边界内换行。假设须要,词内换行( word-break )也将发生。表格自己主动换行,避免撑开。 word-break : normal | break-all | keep-all 參数: normal : 按照亚洲语言和非亚洲语言的文本规则,同意在字内换行 break-all : 该行为与亚洲语言的normal同样。也同意非亚洲语言文本行的随意字内断开。该值适合包括一些非亚洲文本的亚洲文本 keep-all : 与全部非亚洲语言的normal同样。对于中文。韩文,日文,不同意字断开。适合包括少量亚洲文本的非亚洲文本 语法: word-wrap : normal | break-word 參数: normal : 同意内容顶开指定的容器边界 break-word : 内容将在边界内换行。假设须要。词内换行(word-break)也行发生说明:设置或检索当当前行超过指定容器的边界时是否断开转行。

相应的脚本特性为wordWrap。请參阅我编写的其它书目。 语法: table-layout : auto | fixed 參数: auto : 默认的自己主动算法。布局将基于各单元格的内容。

表格在每一单元格读取计算之后才会显示出来。

速度非常慢 fixed : 固定布局的算法。在这算法中,水平布局是只基于表格的宽度。表格边框的宽度。单元格间距,列的宽度。而和表格内容无关说明:设置或检索表格的布局算法。相应的脚本特性为tableLayout。

例:

.word_break {float:left;width:200px;margin:10px;padding:10px;font-size:16px;font-family:simsun;border:1px solid #242424;zoom:1;
word-break:break-all;

}
时间: 2024-09-29 06:40:44

在DIV中自己主动换行的相关文章

div中的字符换行

div中的字符换行 转载自:http://blog.sina.com.cn/s/blog_6a79bc480100tizi.html 1.强制不换行,同时以省略号结尾. <div style="width:100px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;" > 你好朋友为什么不能看到效果啊 </div> 2.css自动换行 div{ word-wrap: break-word; wo

div中让内容能不换行就尽量不换行.【纯原】

div中让内容能不换行就尽量不换行. <html> <head> <style type="text/css"> </style> </head> <body> <div style="width:250px"> <span>悲莫悲兮生别离,乐莫乐兮新相知</span> <div style="float:right"> |=|

如何让div中的文字只显示一行,多余的文字隐藏并加上省略号(超链接形式)

写页面的时候遇到了一个小小的问题,如何让div中一行超链接文字只显示一行,多余的文字隐藏并加上省略号,悬浮时隐藏的文字显示出来?解决问题时发现了css3的一个新标签  text-overflow  ,其属性规定当文本溢出包含元素时发生的事情.语法如下: text-overflow: clip|ellipsis|string; 代码如下: <!DOCTYPE html><html><head><meta http-equiv="Content-Type&q

Android TextView自己主动换行文字排版參差不齐的原因

今天项目没什么进展,公司后台出问题了.看了下刚刚学习Android时的笔记,发现TextView会自己主动换行,并且排版文字參差不齐.查了下资料,总结原因例如以下: 1.半角字符与全角字符混乱所致:这样的情况一般就是汉字与数字.英文字母混用 解决方法一: 将textview中的字符全角化.即将所有的数字.字母及标点所有转为全角字符,使它们与汉字同占两个字节,这样就能够避免因为占位导致的排版混乱问题了. 半角转为全角的代码例如以下,仅仅需调用就可以. public static String To

div中文字超出时自动换行

    在开发中很容易遇到div中文字超出的问题,在此总结以下方法: white-space 属性设置如何处理元素内的空白.这个属性声明建立布局过程中如何处理元素中的空白符.所有浏览器都支持 white-space 属性. 注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit". 值 描述 normal 默认.空白会被浏览器忽略. pre 空白会被浏览器保留.其行为方式类似 HTML 中的 <pre> 标签. nowrap

CSS解决无空格太长的字母,数字不会自己主动换行的问题

事实上非常easy,代码例如以下所看到的,注意 Style: <div class="detail_title" style="word-break: break-all;"><%=StringUtil.toHTML(title) %></div> 默认情况下,一个 DIV或者其它元素的文本,假设都是无文字分隔符,无空格,则不会自己主动换行,比方: <div class="detail_title" st

CSS 中的强制换行和禁止换行

强制换行 1.word-break: break-all;       只对英文起作用,以字母作为换行依据. 2.word-wrap: break-word;   只对英文起作用,以单词作为换行依据. 3.white-space: pre-wrap;     只对中文起作用,强制换行. 禁止换行 white-space:nowrap; overflow:hidden; text-overflow:ellipsis; Jimdo系统在设计上一直存在一个BUG,那就是在主编辑区,遇到英文或数字字串(

ExtJS如何取出某个DIV中的内容

在使用ExtJS的时候,不免我们要在某个DIV中取出DIV的内容,因此通过查找api和相关资料应该向如下方式进行取值 1 Ext.onReady(function(){ 2 var panel = new Ext.Panel({ 3 title:'Ext.core.domhelper.applystyles示例', 4 width:300, 5 height:200, 6 renderTo:'sub1', 7 html:"<div id='div1' style='height:160px

extjs desktop中桌面图标换行

在Desktop.js中扩展一个函数 initShortCut : function() { var btnHeight = 64; var btnWidth = 64; var btnPadding = 30; var col = { index : 1, x : btnPadding }; var row = { index : 1, y : btnPadding }; var bottom; var numberOfItems = 0; var taskBarHeight = Ext.qu