(转)css换行样式:word-wrap同word-break的区别
以下是引用片段: word-wrap:break-word; overflow:hidden; |
而不是
以下是引用片段: word-wrap:break-word; word-break:break-all; |
也不是
以下是引用片段: word-wrap:break-word; overflow:auto; |
在 IE 下没有任何问题,在 FF 下,长串英文会被遮住超出的内容。
word-wrap同word-break的区别
word-wrap:
normal Default. Content exceeds the boundaries of its container.
break-word Content wraps to nextline, and a word-break occurs when necessary. 必要时会触发word-break。
word-break:
normal Default. Allows line breaking within words. 好像是只对Asian text起作用。
break-all Behaves the same as normal for Asian text, yet allows the line to break arbitrarily for non-Asian text. This value is suited to Asian text that contains some excerpts of non-Asian text.
keep-all Does not allow word breaking for Chinese, Japanese, and Korean. Functions the same way as normal for all non-Asian languages. This value is optimized for text that includes small amounts of Chinese, Japanese, or Korean.
总结如下:
word-wrap是控制换行的。
使用break-word时,是将强制换行。中文没有任何问题,英文语句也没问题。但是对于长串的英文,就不起作用。
break-word是控制是否断词的。
normal是默认情况,英文单词不被拆开。
break-all,是断开单词。在单词到边界时,下个字母自动到下一行。主要解决了长串英文的问题。
keep-all,是指Chinese, Japanese, and Korean不断词。即只用此时,不用word-wrap,中文就不会换行了。(英文语句正常。)
ie下:
使用word-wrap:break-word;所有的都正常。
ff下:
如这2个都不用的话,中文不会出任何问题。英文语句也不会出问题。但是,长串英文会出问题。
为了解决长串英文,一般用word-wrap:break-word;word-break:break-all;。但是,此方式会导致,普通的英文语句中的单词会被断开(ie下也是)。
目前主要的问题存在于 长串英文 和 英文单词被断开。其实长串英文就是一个比较长的单词而已。
即英文单词应不应该被断开那?那问题很明显了,显然不应该被断开了。
对于长串英文,就是恶意的东西,自然不用去管了。但是,也要想些办法,不让它把容器撑大。
用:overflow:auto; ie下,长串会自动折行。ff下,长串会被遮盖。
所以,综上,最好的方式是word-wrap:break-word;overflow:hidden;而不是word-wrap:break-word;word-break:break-all;。
word-wrap:break-word;overflow:auto;在ie下没有任何问题。在ff下,长串会被遮住部分内容。
另,测试代码如下:
1.htm
<style>
.c1{ width:300px; border:1px solid red}
.c2{ width:300px;word-wrap:break-word; border:1px solid yellow}
.c3{ width:300px;word-wrap:break-word;word-break:break-all; border:1px solid green}
.c4{ width:300px;word-wrap:break-word;word-break:keep-all; border:1px solid blue}
.c5{ width:300px;word-break:break-all; border:1px solid black}
.c6{ width:300px;word-break:keep-all; border:1px solid red}
.c7{ width:300px;word-wrap:break-word;overflow:auto; border:1px solid yellow}
</style>
.c1{ width:300px; border:1px solid red}
<div class="c1">asdasd
</div>
<div class="c1">
This is all English. This is all English. This is all English.
</div>
<div class="c1">
全是中文的情况。全是中文的情况。全是中文的情况。
</div>
<div class="c1">
中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
</div>
<br>
.c2{ width:300px;word-wrap:break-word; border:1px solid yellow}
<div class="c2">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class="c2">
This is all English. This is all English. This is all English.
</div>
<div class="c2">
全是中文的情况。全是中文的情况。全是中文的情况。
</div>
<div class="c2">
中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
</div>
<br>
.c3{ width:300px;word-wrap:break-word;word-break:break-all; border:1px solid green}
<div class="c3">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class="c3">
This is all English. This is all English. This is all English.
</div>
<div class="c3">
全是中文的情况。全是中文的情况。全是中文的情况。
</div>
<div class="c3">
中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
</div>
<br>
.c4{ width:300px;word-wrap:break-word;word-break:keep-all; border:1px solid blue}
<div class="c4">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class="c4">
This is all English. This is all English. This is all English.
</div>
<div class="c4">
全是中文的情况。全是中文的情况。全是中文的情况。
</div>
<div class="c4">
中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
</div>
<br>
.c5{ width:300px;word-break:break-all; border:1px solid black}
<div class="c5">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class="c5">
This is all English. This is all English. This is all English.
</div>
<div class="c5">
全是中文的情况。全是中文的情况。全是中文的情况。
</div>
<div class="c5">
中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
</div>
<br>
.c6{ width:300px;word-break:keep-all; border:1px solid red}
<div class="c6">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class="c6">
This is all English. This is all English. This is all English.
</div>
<div class="c6">
全是中文的情况。全是中文的情况。全是中文的情况。
</div>
<div class="c6">
中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
</div>
<br>
.c7{ width:300px;word-wrap:break-word;overflow:auto; border:1px solid yellow}
<div class="c7">
safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
</div>
<div class="c7">
This is all English. This is all English. This is all English.
</div>
<div class="c7">
全是中文的情况。全是中文的情况。全是中文的情况。
</div>
<div class="c7">
中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
</div>
原文地址:http://homepage.yesky.com/207/7707707.shtml
(转)css换行样式:word-wrap同word-break的区别的更多相关文章
- word wrap 解惑
源起 我们经常需要“修复”一个老生常谈的“bug”,那就是文本的自动换行问题.在专业术语上,这种期望得到的渲染现象被称作“word wrap”,即文本处理器有能力把超出页边的整个词自动传到下一行. 在 ...
- word break和word wrap
默认情况下,如果同一行中某个单词太长了,它就会被默认移动到下一行去: word break(normal | break-all | keep-all):表示断词的方式 word wrap(norma ...
- 精简的网站reset和css通用样式库
一.CSS reset body{ line-height:1.4; color:#; font-family:arial; font-size: 12px; } input,textarea,sel ...
- css初始化样式代码
为什么要初始化CSS? CSS初始化是指重设浏览器的样式.不同的浏览器默认的样式可能不尽相同,所以开发时的第一件事可能就是如何把它们统一.如果没对CSS初始化往往会出现浏览器之间的页面差异.每次新开发 ...
- CSS常用样式及示例
CSS常用样式及示例 一.简介 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集) ...
- 第 15 章 CSS 文本样式[下]
学习要点: 1.文本总汇 2.文本样式 3.文本控制 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 文本样式,通过文本样式的设置,更改字体的大小.样式以及文本的方位. 一.文本总汇 本节课, ...
- 网页中的CSS换行控制
在进行DivCSS布局时,需要对文本进行控制,向大家介绍一下,CSS中控制换行的四种属性.一.white-space 可以实现HTML中PRE标签的效果,以及单元格的noWrap效果.语法: whit ...
- POI 读取word (word 2003 和 word 2007) (转)
最近在给客户做系统的时候,用户提出需求,要能够导入 word 文件,现在 microsoft word 有好几个版本 97.2003.2007的,这三个版本存储数据的格式上都有相当大的差别,而现在 9 ...
- CSS换行:word-wrap、word-break和text-wrap区别
一.word-wrap:允许对长的不可分割的单词进行分割并换行到下一行.(中英文处理效果一样) word-wrap有两个取值: 1.word-wrap: normal:只在允许的断字点换行(浏览器保持 ...
随机推荐
- 学会使用git
廖雪峰Git教程 这个教程较为简单,循序渐进 易百Git教程 较为系统 在线代码格式化 可以下载全球最大视频网站的视频支持搜索 点这里
- Android开源项目发现---ActionBar篇(持续更新)
1. ActionBarSherlock 鼎鼎大名, 为Android所有版本提供统一的ActionBar,解决4.0以下ActionBar的适配问题 项目地址:https://github.com/ ...
- perl静态编译DBD
编译DBD 项目中经常使用perl,但perl在连接数据库时,需要依赖DBI,DBD驱动,但默认安装DBD驱动时,需要依赖数据库的lib库. 比如perl连接MySQL,需要安装MySQL clien ...
- 【Bower】
Bower Bower:客户端库管理工具 Day 1: Bower —— 管理你的客户端依赖关系 bower解决js的依赖管理
- nginx + memcached-session-manager 实现tomcat下的负载均衡
1. tomcat6.0 配置 memcached-session-manager 实现session共享 1.1 下载memcached-session-manager-1.6.5.jar.memc ...
- (转载)PHP 判断常量,变量和函数是否存在
(转载)http://www.jb51.net/article/17881.htm 如果你看懂了上面一句话,那么接下来都是废话,PHP手册写的还是很全的.一句话就把我标题中的问题全部解决了. 还是举几 ...
- RobotFramework+Selenium2library+Appium+Python+RIDE安装指南
最近在测试APP+WEB,想找一个好的自动化测试工具.然后发现RIDE这工具,框架比较自由,支持中文,有测试报告. 一个好的自动化测试就应该包含:Case管理+脚本的编写+自动生产报告. 如此一想,这 ...
- Mysql技术内幕-笔记-第二章 数据类型
第二章 数据类型 Mysql中尽量不要使用UNSIGNED,因为可能会带来一些意想不到的效果 SHOW CREATE TABLE tablename\G;查看表的创建语句 ZEROFILL会将宽度小于 ...
- (转)Python:self
原文:http://www.douban.com/group/topic/19376685/ 这是对前面一个php程序员问python方法为什么要手写一个self的回答,当时那个帖非常的热闹,但是下面 ...
- JSP页面同时操作所有Input输入框
项目里要写个function,对页面上所有input输入框进行非空判断,对非空input全部置为readOnly,提交的时候判断是否有空白项目. var inputs=document.getElem ...