文档章节

css实现强制不换行/自动换行/强制换行

完美世界
 完美世界
发布于 2014/06/05 16:40
字数 560
阅读 46
收藏 0

css实现强制不换行/自动换行/强制换行

来自: sugar 2008-07-30 09:06:08

强制不换行 

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; }


© 著作权归作者所有

共有 人打赏支持
完美世界
粉丝 10
博文 151
码字总数 134011
作品 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
10
0
div、p、td 的强制不换行及强制换行

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

王超
2014/03/20
0
0
页面数据展示的太长,怎么让他自动换行

自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法 对于div,p等块级元素 正常文字的换行(亚洲文字和非亚洲文字...

元来元去
2010/11/22
0
0
Web前端设计:Html强制不换行标签用法代码示例

在网页排版布局中比如文章列表标题排版,无论多少文字均不希望换行显示,需要强制在一行显示完内容。这就可以nobr标签来实现。它起到的作用与word-break:keep-all 是一样的。nobr 是 No Bre...

小星星程序员
2014/11/16
0
0
Java利用POI生成Excel强制换行

前一段时间在做一个学校排课系统时,有一个地方需要利用把课程表生成excel汇出给客户,由于之前用excel都只是简单的应用,在单元格里都是用自动换行,而这次可能需要用到手动强制换行。 于是...

boonya
2014/03/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Centos7安装docker和docker-compose

docker-安装 yum update yum install -y docker-engine docker-compose pip install -U docker-compose...

落叶清风
21分钟前
1
0
7个Python实战项目代码,让你感受下大神是如何起飞的!

关于Python有一句名言:不要重复造轮子。 但是问题有三个: 1、你不知道已经有哪些轮子已经造好了,哪个适合你用。有名有姓的的著名轮子就400多个,更别说没名没姓自己在制造中的轮子。 2、确...

糖宝lsh
22分钟前
1
0
【随记】Maven 与mysql 版本(maven mysql 5.1.38用的最多)

MySQL Connector/J 我的电脑mysql版本为5.7.20-log maven pom.xml 依赖可用5.1.38 pom.xml依赖代码 $加<properties>变量名的实例代码 <properties><!-- data --><mysql-connector-ja......

颖伙虫
24分钟前
1
0
观察者模式

意图: 在对象的内部状态发生变化时,自动通知外部对象进行响应。 构成 被观察者:内部状态有可能被改变,而且又需要通知外部的对象。 观察者:需要对内部状态的改变做出响应的对象。 Java实...

noob_fly
31分钟前
1
0
设计模式之 MVC

MVC 是 模块化思想或者分层思想的实践。 当我们设计一个Web应用的时候,我们的业务流是,读取数据库中的数据,进行逻辑处理,渲染到页面;如果是交互型的页面,那么页面有输入或者事件发生的...

backbye
33分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部