CSS属性探秘系列(一):word-break与word-wrap

   2015-11-06 0
核心提示:本文是CSS属性探秘系列的第一篇,详细介绍了word-break与word-wrap的异同与示例分析,非常简单实用,有需要的朋友可以参考下

一、浏览器自带的自动换行
各浏览器自身都带有自动换行功能,当浏览器显示文本的时候会让文本在浏览器或者div元素的右端自动换行。换行情况如下:

1.non-CJK:会在半角空格或者连字符(-)位置自动换行,不会在长单词的中间换行

2.CJK(中日韩):可以在任何一个CJK字体后换行

3.CJK中包含non-CJK:non-CJK部分按 non-CJK情况处理进行换行处理

4.CJK中含有标点符号时,浏览器不会让标点符号位于一个行的行首,会使标点符号和前一个字符组成一个整体进行换行。

二、word-break:
属性及浏览器兼容

value description IE FF Chrome& Safari Operanormal浏览器默认换行yesyesyesyeskeep-allCJK:不允许换行,non-CJK:与normal属性相同,IE中(对于CJK:在半空格、连接符或者任何标点符号处换行),chrome&safari不支持(使用默认换行)yesyesnoyesbreak-all允许单词内换行,IE(不允许标点符号位于行首),FF&Chrome&Safari(允许标点符号位于行首)yesyesyesyes

三、word-wrap:
1.取值:
normal:在半空格、连接符位置换行
break-word:允许在长单词(如URL地址)内部断行

2.支持所有浏览器

四、实例

复制代码
代码如下:

<style type="text/css">
.box{width:100px;height:100px;border:2px solid #f00;color:#333;font:12px arial;margin-bottom:10px;}
.keepall{word-break:keep-all;}
.breakall{word-break:break-all;}
.breakword{word-wrap:break-word;}
</style>



复制代码
代码如下:

<div class="box keepall">
自身都带有自动换行功能啊,AAAAAA BBBBBBBBBBBBB,CCCCCCCCC,的右端自动换行。
</div>
此例中注意keep-all在不同浏览器中的兼容,特殊符号处的换行!
<div class="box breakall">
自身都带有自动换行功能啊,AAAAAA BBBBBBBBBBBBB,CCCCCCCCC,的右端自动换行。
</div>
此例中注意逗号的位置!
<div class="box breakword">
自身都带有自动换行功能啊,AAAAAA BBBBBBBBBBBBB,CCCCCCCCC,的右端自动换行。
</div>


CSS属性探秘系列(一):word-break与word-wrap

五、word-break:break-all 与word-wrap:break-word区别?
看上图即可说明

参考链接:

https://developer.mozilla.org/en-US/docs/Web/CSS/word-break

 
反对 0举报 0 评论 0
 

免责声明:本文仅代表作者个人观点,与乐学笔记(本网)无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们留言联系,本网站将在规定时间内给予删除等相关处理.

  • 转:css属性大全
    CSS 属性大全文字属性「字体族科」(font-family),设定时,需考虑浏览器中有无该字体。「字体大小」(font-size),注意度量单位。《绝对大小》|《相对大小》|《长度》|《百分比》(一般设置双数)「字体加粗」(font-weight),除了 normal(正常)、bold(
    03-08
  • css属性设置-显示与隐藏、盒子阴影、固定定位
    显示与隐藏!DOCTYPE htmlhtmlheadmeta charset="utf-8"title显示与隐藏/titlestylebody {margin: 0;}div {width: 200px;height: 200px;background-color: orange;font: 30px/200px 'Arial';color: red;text-align: center;margin: 0 auto;border-radius: 50%;
    03-08
  • 03-08
  • JS之路——JS获取CSS属性 css获取js变量吗
    1.获取内联样式  element.style.attr2.获取css内部样式!DOCTYPE htmlhtmlheadtitle/titlestyle type="text/css"div{width: 100px;height: 100px;background: red;}/style/headbodydiv /divscript type="text/javascript"function getStyle(element , attr)
    03-08
  • css简单学习属性 css属性代码大全
    css简单学习属性 css属性代码大全
      1:内联元素和块级元素1).块级元素,默认是独自占据一行的。比如是p、h1、h2、h3、h4、h5、h6、ul、ol、dl、pre、hr /2).内联元素,默认是几个内联元素都可以在同一行上显示。比如是a、span等。2:内联元素可以变成块级元素,块级元素可以变成内联元素。!DOCT
    03-08
  • css浮动、定位到底什么鬼? 浮动定位的两个关键
    css操作元素位置有以下几种方式:float、position、top等。 I float part1.浮动首先会先将元素在正常文档流中删除,父容器无法获取元素高度,但是该元素依然影响布局。2.任何元素被浮动后先生成一个块级框,然后为自己指定一个包含块。3.浮动元素与正常元素
    02-08
  • css3动画加停止 可设置动画暂停的css属性为
    !DOCTYPE htmlhtml lang="en"headmeta charset="UTF-8"titlec3播放暂停/titlestyle type="text/css".animation{width: 100px;height: 100px;margin: 50px auto;background: deeppink;animation: move 2s linear infinite alternate; }input{displa
    02-08
  • JS笔记一:动态修改css样式 js动态增加css属性
    ---恢复内容开始---最近在学习CSS/JS的样式,两个合学习一起学习,加深JS的书写和了解。一、通过Javasript修改图片大小通过函数来传递图片id,height,width,使用document.ElementByID来控制图片的大小,也就通过id 控制图片,之前有学过一句document.getEle
    02-08
  • Css继承属性和非继承属性 css属性有哪些
    一、无继承性的属性1、display:规定元素应该生成的框的类型2、文本属性:vertical-align:垂直文本对齐text-decoration:规定添加到文本的装饰text-shadow:文本阴影效果white-space:空白符的处理unicode-bidi:设置文本的方向3、盒子模型的属性:width、he
    02-08
  • 【CSS3】table的css属性 css中table
    【CSS3】table的css属性 css中table
    table的css属性border-collapse设置是否把表格边框合并为单一的边框。border-spacing设置分隔单元格边框的距离。caption-side设置表格标题的位置。empty-cells设置是否显示表格中的空单元格。table-layout设置显示单元、行和列的算法。1.border-collapse:设
    02-08
点击排行