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; word-break: normal; }

3、css强制英文单词断行
div{word-break:break-all;}

若是div嵌套,要使内层div根据内容自动换行,则可只设置外层的div宽,和
white-spance:nowrap即可。

语法: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:break-allword-wrap:break-word都是能使其容器如DIV的内容自动换行

它们的区别就在于:

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

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

建议:word-break 用3C检测会显示问题的,导致百度快照也会出问题-这个属性OPERA FIREFOX 浏览器也不支持
word-break属性可以用white-space:normal;来代替,这样在FireFox和IE下就都能正确换行,而且要注意,单词间的空格不能用来代替,不然不能正确换行。

时间: 2024-10-01 19:26:43

div中的字符换行的相关文章

在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:

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

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

WEB开发中的字符集和编码

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption

div中文字超出时自动换行

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

display:table-cell自适应布局下连续单词字符换行——张鑫旭

之前有几次提到了使用display:table-cell实现强大的任意尺寸元素的自适应布局(都藏在长长文章之中).这里开篇再次提一下,希望能将该技术普及下去. 典型的双栏布局类名使用如下: fix l cell 该类名去来自我自己整的CSS基本样式库 – zxx.lib.css 套用HTML显示则为: <div class="fix"> <div class="l"></div> <div class="cell&

每天一个JavaScript实例-处理textarea中的字符成每一行

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>每天一个JavaScript实例-处理textarea中的字符成每一行</title> <script> function clicka(){ console.log("aaa"); var aa = document.get

字符串中单个字符的用法

我们使用字符串时经常要对字符串中单个字符进行处理,比如检测一个string对象是否包含空白,或者把string对象中的字母大写改为小写,查看某个特定字符是否出现,判断字符串是否为数字等等. 这类处理的关键是要获取字符本身.有时需要处理string对象中的每一个字符,另外一些时候则只需处理某个特定的字符,还有些时候遇到某个条件处理就要停下来. 在cctype头文件中定义了一组标准库函数处理字符串的工作. cctype头文件中的函数 isalnum(c)    当c是字母或数字时为真 isalpha

寻找字符串中出现字符最多的次数,出现次数最多的字符,出现次数最多的字符的索引

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <link rel="stylesheet" href="css.css"> <script src="js.js"></script>

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

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