(转)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:只在允许的断字点换行(浏览器保持 ...
随机推荐
- 高人ozhy111提供的下载资源
特别是有很多手机方面的独创源代码,先记下来,有空挨个看一遍: http://download.csdn.net/user/ozhy111 比如:idtcpserver文件传输xe7PC端及手机端 ht ...
- [LeetCode#156] Binary Tree Upside Down
Problem: Given a binary tree where all the right nodes are either leaf nodes with a sibling (a left ...
- POJ_3685_Matrix_(二分,查找第k大的值)
描述 http://poj.org/problem?id=3685 一个n*n的矩阵,(i,j)的值为i*i+100000*i+j*j-100000*j+i*j,求第m小的值. Matrix Time ...
- HDOJ -- 4699
Editor Time Limit: 3000/2000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others)Total Su ...
- 敌兵布阵 HDOJ--1166
敌兵布阵 Time Limit : 2000/1000ms (Java/Other) Memory Limit : 65536/32768K (Java/Other) Total Submissi ...
- Design T-Shirt
Design T-Shirt Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)To ...
- 【转】qtp安装时问题
1.安装qtp后要重启机器. 2.插件选择错误, 处理方式:重新启动QTP,勾选 WEB插件; 3.在安装QTP后,或者禁用IE浏览器里的一些ActiveX控件后,正常录制QTP时,对象识别不了;(保 ...
- 机器学习笔记1——Introduction
Introduction What is Machine Learning? Two definitions of Machine Learning are offered. Arthur Samue ...
- coco2dx 精灵类
CCSize size = CCDirector::sharedDirector()->getWinSize(); CCSprite *bg = CCSprite::create("H ...
- 解析Qt4.7.3编译MySql数据库驱动,存中文乱码、过滤转义字符问题
问题:使用QSqlDataBase类建立连接MySql数据库驱动加载失败 QSqlDatabase: QMYSQL driver not loaded QSqlDatabase: available ...