CSS技巧:word-wrap与word-break的区别

内容摘要:本文列举了兼容 IE 和 FF 的换行 CSS 推荐样式,详细介绍了word-wrap同word-break的区别。

兼容 IE 和 FF 的换行 CSS 推荐样式

最好的方式是

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 next line, 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,中文就不会换行了。(英文语句正常。)

时间: 2024-05-21 16:25:05

CSS技巧:word-wrap与word-break的区别的相关文章

前端-word wrap和word break为啥设计成一个属性?

问题描述 word wrap和word break为啥设计成一个属性? word-wrap: The word-wrap property is used to specify whether or not the browser may break lines within words in order to prevent overflow when an otherwise unbreakable string is too long to fit in its containing bo

word wrap 解惑

源起 我们经常需要"修复"一个老生常谈的"bug",那就是文本的自动换行问题.在专业术语上,这种期望得到的渲染现象被称作"word wrap",即文本处理器有能力把超出页边的整个词自动传到下一行. 在现实项目中,尤其是在测试阶段,鉴于测试使用非常极端的测试用例,我们经常需要"修复"如图所示的这个问题: 长单词溢出 图中,极长的这个英文单词(虽然是生造的)为了保证完整的显示,无奈地超出了容器的限制,它溢出了.为了"修复

101个CSS技巧的代码(基础篇)

css|技巧 <!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="//www.w3.org/1999/xhtml"><head><title>Chapter 2</title><me

css技巧: 10个非常不错的CSS技巧

在这里,巧妙的运用CSS的技巧,可以让你不用修改HTML就能得到很好的博客或者模板外观.我收集了一些非常有用的CSS技巧让我们设计博客时更炫更酷.设计模版和博客主题时,我经常"不断推敲和尝试CSS(Hit and Trial CSS ),我只看哪种配色方案和哪种CSS属性的结合能使页面的元素更完美.对了.之所以说是"不断推敲和尝试CSS"是因为在得到了满意的效果之前我会去尝试想尽一切方法.使用这些不同的CSS属性中,我用的最多的是列出来的这些.从我开始写博客,我就接触了CSS

CSS技巧汇总:网页制作常用的22个CSS技巧

文章简介:22个必须知道的css技巧. 1.改变选中文字的背景和颜色 <PRE style="LINE-HEIGHT: 24px; WIDOWS: 2; TEXT-TRANSFORM: none; BACKGROUND-COLOR: rgb(255,255,255); FONT-VARIANT: normal; FONT-STYLE: normal; TEXT-INDENT: 0px; MARGIN: 0px 0px 10px; ORPHANS: 2; LETTER-SPACING: no

CSS技巧荟萃:了解CSS页面布局和加载流程

如果你开发web相关应用或者网站的话,肯定知道CSS对于页面布局的重要性.在本篇CSS技巧中我们将介绍页面加载的流程来帮助你更好的实现页面布局. 介绍 在我们开始正式的介绍页面流程前,我们需要简单了解几种不同类型的html元素,以及它们的缺省显示方式.这里我们主要重点介绍两个类型的元素: block inline 如果大家关心html5的话,你应该知道在HTML5中也包含了几个新的元素,例如,section,article等等,但是仍旧遵循这里我们介绍的显示类型. inline类型的元素包括:

CSS技巧:关于CSS Hack与float闭合(清除浮动)

核心提示:CSS技巧:关于CSS Hack与float闭合 一.CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.) 2, IE6/IE77对FireFox *+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签. <style>#wrapper{#wrapper {

几个实用的css技巧

这里有几个实用的css技巧,或许对您有所帮助. 使用 line-height 垂直居中 line-height:24px; 使用固定宽度的容器并且需要一行垂直居中时,使用 line-height 即可(高度与父层容器一致),更多的垂直居中总结可以看这里. 清除容器浮动 #main {     overflow:hidden; } 期前也提到过这样的问题,更多信息可以看这里. 不让链接折行 a {     white-space:nowrap; } 上面的设定就能避免链接折行,不过个人建议长链接会

你未必知道的10个CSS技巧

css|技巧 font的简写CSS很多元素都有简写,font要特别和严格一些,font-size和font-family是必须的,而且要按照这个顺序.因为font用到的地方比较多,所以他可能特别提到.简写能有效减小你的CSS文件的体积. class属性叠加其实在class中可以同时加入多个属性,属性用空格隔开.例如:<p class="text side">...</p>这样<p>就继承了.text和.side的有效属性(冲突的地方会自动被排斥).随

CSS技巧:important和空格的组合技巧及其他

css|技巧 !important和(空格)/**/:的组合技巧及其他 先温习一下对于IE的box-model的破解IE box-model这个臭名昭著的bug存在于IE6/Win以前的每一只版本,这个虫子直到tantak发布了流传最为广泛的那个hack才开始被驯服. http://www.tantek.com/CSS/Examples/boxmodelhack.htmlIE5.X/win对box-model的解析是一样的,他们认为width包括了边框(border)和补白(padding),幸