标题 | css中换行的名词解释及应用 |
内容 | ie定义了多个换行处理属性:line-break,word-break,word-wrap,另外css1定义了white-space,css3增加了word-wrap line-break:专门负责控制日文换行,国内的设计师接触的比较少 word-break:这个属性主要针对亚洲语言和非亚洲语言进行控制换行.当属性取值break-all时,可以允许非亚洲语言文本行的任意字内断开;当属性取值keep-all时,表示在中文,韩文,日文中是不允许字断开的 word-wrap:这个属性可以控制换行.当属性取值break-word时,将强制换行,中文文本没有任何问题,英文语句也没有问题.但是对于长串的英文就不起作用,也就是说,word-wrap:break-word是控制是否断词,而不是断字符;取值为normal时表示控制连续文本换行 white-space:具有格式化文本的作用,当属性取值为nowrap时,表示强制在同一行内显示所有文本,当属性取值为pre时,表示显示预定义文本格式 css3中的word-wrap属性尚未被广泛支持,支持的浏览器有ie6,7,8,9,firefox3.5,opera10.5,safari3.0,safari4.0,chrome 应用: 防止表格的标题行换行 将表格的标题行用th表示,对th定义css如下 th{word-break:keep-all;/*禁止词断开显示*/ word-warp:normal;/*允许内容顶开指定的容器边界,如果声明了word-wrap:break-word则会在ie浏览器中出现换行显示,会破坏整个标题行的样式*/ white-space:nowrap;/*强迫在一行内显示*/} 在ie6,7,8,ff,chrome,opera,safari,遨游浏览器下测试都没问题 超过宽度的文字显示未省略号,对文本层应用wrap类,则wrap的css设置如下: .wrap{white-space:nowrap;overflow:hidden;-o-text-ellipsis:ellipsis;/*兼容opera浏览器*/text-ellipsis:ellipsis;} 这个设置ff下不能显示为省略号,但是超过宽度会隐藏,不会破坏布局 |
随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。