文档章节

CSS强制英文、中文换行与不换行 强制英文换行

 若沙
发布于 2016/09/06 18:13
字数 439
阅读 5
收藏 0
1. word-break:break-all;只对英文起作用,以字母作为换行依据
2. word-wrap:break-word; 只对英文起作用,以单词作为换行依据
3. white-space:pre-wrap; 只对中文起作用,强制换行
4. white-space:nowrap; 强制不换行,都起作用
5. white-space:nowrap; overflow:hidden; text-overflow:ellipsis;不换行,超出部分隐藏且以省略号形式出现(部分浏览器支持) 

代码:
.p1{ word-break:break-all; width:150px;}/*只对英文起作用,以字母作为换行依据*/
.p2{ word-wrap:break-word; width:150px;}/*--只对英文起作用,以单词作为换行依据*/
.p3{white-space:pre-wrap; width:150px;}/*只对中文起作用,强制换行*/
.p4{white-space:nowrap; width:10px;}/*强制不换行,都起作用*/
.p5{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:100px;}//*不换行,超出部分隐藏且以省略号形式出现*/

注意,一定要指定容器的宽度,不然的话是没有用的。

注意word-break 是IE5+专有属性

语法:

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

参数:

normal :  依照亚洲语言和非亚洲语言的文本规则,允许在字内换行

break-all :  该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本

keep-all :  与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本

说明:

设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。

对于中文,应该使用break-all 。

 

 

 
注意,兼容火狐浏览器强制英文换行:

 

<div style="word-wrap:break-word; white-space:normal; word-break:break-all; width:150px;">英文内容</div>

© 著作权归作者所有

粉丝 0
博文 42
码字总数 10695
作品 0
深圳
网页/平面设计
私信 提问
【CSS】CSS强制英文、中文换行与不换行

CSS强制英文、中文换行与不换行 结构: 1.Transshipment Booking System is launched只对英文起作用,以字母作为换行依据 2.Transshipment Booking System is launched只对英文起作用,以单词...

呢喃的猫咪
2013/01/05
131
0
CSS强制英文、中文换行与不换行 强制英文换行

word-break:break-all;只对英文起作用,以字母作为换行依据 2. word-wrap:break-word; 只对英文起作用,以单词作为换行依据 3. white-space:pre-wrap; 只对中文起作用,强制换行 4. white-s...

哈狮子
2015/12/21
91
0
div、p、td 的强制不换行及强制换行

关于强制不换行、强制换行的话题在网上已经被讨论了无数次,但我发现都不够全面,没有充分考虑各种浏览器、各种标签等情况,以致不兼容,所以我再来说说。由于 div 和 p 在本文的讨论中,效果...

王超
2014/03/20
1K
0
[转载]css控制文字换行

.zjtext{ font-size:12px; color:#fff; padding:5px; width:100px;white-space:normal; overflow:hidden; } 以上是我引用的,关键语:white-space:normal; overflow:hidden; 强制不换行 p.ww......

Kilar
2015/12/08
13
0
文本溢出text-overflow

本文转载于:猿2048网站文本溢出text-overflow

前端老手
08/28
18
0

没有更多内容

加载失败,请刷新页面

加载更多

html之表单

本文转载于:专业的前端网站➞html之表单 表单作用:搜集信息; 组成:提示信息、表单控件、表单线 <form action="1.php" method="post" maxlength="6(最大长度)" readonly="readonly(只读,......

前端老手
13分钟前
7
0
Mybatis之Executor

mybatis-3.4.6.release. 图1 Executor是个接口,具体实现是在BaseExecutor和4个子类中。 1.BatchExecutor BatchExecutor与其它的区别是update方法中,使用的是StatementHandler的batch方法,...

克虏伯
32分钟前
5
0
mysql清空表数据并让自增ID从1开始计数

1 使用truncate命令清空表 Truncate Table test truncate 命令速度比delete的删除更快,而且自动将自增字段重新从1计数 2 pypAmyAdmin中操作选项卡(Operations)中进行修改 ps. 网上一些alt...

编程老陆
40分钟前
5
0
58. 静态工厂方法

参考:https://www.jianshu.com/p/ceb5ec8f1174 https://www.jianshu.com/p/fa15f63d399a 1.定义 用一个静态方法来对外提供自身实例的方法,即为我们所说的静态工厂方法(Static factory met...

20190513
46分钟前
8
0
遇到API安全问题怎么办?F5 API加固解决方案怎么样?

  在各种APP泛滥的现在,背后都有同样泛滥的API接口在支撑,其中鱼龙混杂,直接裸奔的WEB API大量存在,安全性令人堪优在以前都采用自已定义的接口和结构,对于公开访问的接口,专业点的都会做...

梅丽莎好
今天
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部