巧用css实现强制不换行、自动换行、强制换行（转）

我们在写页面代码的时候，有时把一个表格的宽度定死后会出现里面的文字不见了，特别是英文。这就是他换行了所导致的，这时我们就需要加些CSS元素让它来听我们的话！根据自己以往的经验，也参考了些网上的文章，具体如下：

强制不换行

div{
white-space:nowrap;
}

自动换行

div{
word-wrap: break-word;
word-break: normal;
}

强制英文单词断行

div{
word-break:break-all;
}

============================================

CSS设置不转行:

overflow:hidden 隐藏
white-space：normal 默认
pre 换行和其他空白字符都将受到保护
nowrap 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象

设置强行换行
word-break:
normal ; 依照亚洲语言和非亚洲语言的文本规则，允许在字内换行
break-all : 　该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all : 　与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本与之间的高度解决办法

============================================

看了以上的介绍，赶快试一下，看看效果吧！

英文不换行

CSS里加上 word-break: break-all; 问题解决。这个问题只有IE才有，在FF下测试,FF可以自己加滚动条，这样也不影响效果

建议大家做Skin时，记得在body里加 word-break: break-all; 这样可以解决IE的框架被英文撑开的问题

以下引用word-break的说明, 注意word-break 是IE5+专有属性

语法：

word-break : normal | break-all | keep-all

参数：

normal : 　依照亚洲语言和非亚洲语言的文本规则，允许在字内换行
break-all : 　该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all : 　与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本

说明：

设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。
对于中文，应该使用break-all 。
对应的脚本特性为wordBreak。请参阅我编写的其他书目。

示例：

div {word-break : break-all; }

转载于:https://www.cnblogs.com/chinafine/archive/2009/02/09/1386821.html

巧用css实现强制不换行、自动换行、强制换行（转）相关推荐

css如何让不自动换行,css实现强制不换行/自动换行/强制换行
在我们日常的编码中经常会遇到这段文字不可以换行,或者自动换行的需求.虽然这个功能在我们平时很常见但是我相信大家一定不会可以的去记住它吧(至少♦ 嘻嘻...).今天我们来学习一下如何熟练的掌握用css实 ...
css实现强制不换行/自动换行/强制换行---转帖，致谢王维刚
210.21.226.* 1楼强制不换行 div{ white-space:nowrap; } 自动换行 div{ word-wrap: break-word; word-break: norm ...
css实现强制不换行/自动换行/强制换行
1.强制不换行 div{ white-space:nowrap;} 2.自动换行 div{word-wrap: break-word;word-break: normal; } 3.强制英文单词断行 ...
css强制换行、强制不换行，溢出隐藏
css实现强制不换行/自动换行/强制换行在我们日常的编码中经常会遇到这段文字不可以换行,或者自动换行的需求.虽然这个功能在我们平时很常见但是我相信大家一定不会可以的去记住它吧.今天我们来学习一下如何 ...
html 数字自动换行,css怎么让连续数字字母强制换行？
在div+css布局中,在div.p.h2.h1等盒子里连续英文字母或连续数字会排成一排显示不会自动随盒子宽度限制而自动换行.那么怎么让连续数字字母强制换行?下面给大家介绍一下. 中文字在DIV或任意 ...
html p自动换行超出省略,CSS自动换行、强制不换行、强制断行、超出显示省略号...
CSS自动换行.强制不换行.强制断行.超出显示省略号 CSS自动换行.强制不换行.强制断行.超出显示省略号 CSS样式设置自动换行.强制不换行.强制断行.超出显示省略号 P标签是默认是自动换行的,因此 ...
html文字自动换行 ie,css 自动换行强制换行属性 (firefox+ie)
css 自动换行强制换行属性 (firefox+ie) 发布时间:2009-10-13 17:40:39 作者:佚名我要评论 css 自动换行强制换行属性,在实际应用中,如果不强制换行会 ...
CSS自动换行、强制不换行、强制断行、超出显示省略号
CSS样式设置自动换行.强制不换行.强制断行.超出显示省略号 P标签是默认是自动换行的,因此设置好宽度之后,能够较好的实现效果,如下所示,当设置div宽度为固定值时,p中内容能够自动换行: 但是最近的 ...
CSS 强制换行和禁止换行学习
强制换行 1.word-break: break-all; 只对英文起作用,以字母作为换行依据. 2.word-wrap: break-word; 只对英文起作用,以单词作为换行依据. ...
css表格强制不换行符,css控制table单元格强制换行与强制不换行
css 我们先看一下css手册中,对于list-style地解释: 定义和用法 list-style 简写属性在一个声明中设置所有地列表属性. 说明该属性是一个简写属性,涵盖了所有其他列表样式属性. ...

巧用css实现强制不换行、自动换行、强制换行（转）

巧用css实现强制不换行、自动换行、强制换行（转）相关推荐

最新文章

热门文章