文档章节

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

完美世界
 完美世界
发布于 2014/06/05 16:40
字数 560
阅读 40
收藏 0
点赞 0
评论 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
博文 149
码字总数 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
IE6 中,如何令 table 、td 内的 pre 内容在容器边缘强制自动换行?

我在表格的单元格里有个 pre ,形如:   ……        ……      长长长长长的字符串     ……      …… 我已经定义了如下 CSS : pre {   white-space: pre-wrap;  ...

自由狼-台风
2015/03/17
187
0
【CSS】CSS强制英文、中文换行与不换行

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

呢喃的猫咪
2013/01/05
0
0
CSS3 文本换行

文本换行其实是个非常常用但并不起眼的特性。你什么都不用设,浏览器自动就会换行。例如英语,浏览器会根据容器尺寸,选择在半角空格或连字符处换行。例如中文,浏览器会选择在文字或标点符号...

tyou
01/28
0
0
CSS3 文本效果

CSS3 文本效果 CSS3中包含几个新的文本特征。 在本章中您将了解以下文本属性: text-shadow word-wrap 浏览器支持 Internet Explorer 10, Firefox,Chrome, Safari, 和 Opera支持text-shadow...

wybo521
2016/01/23
8
0
css杂类收集2

过滤器实现 div{ filter:alpha(opacity=50); // ie8- -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; / IE 8 / opacity:0.5; // ie9+ and other browser} ps:对于 op......

bosscheng
2015/12/11
59
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Linux服务器下的HTTP抓包分析

说到抓包分析,最简单的办法莫过于在客户端直接安装一个Wireshark或者Fiddler了,但是有时候由于客户端开发人员(可能是第三方)知识欠缺或者其它一些原因,无法顺利的在客户端进行抓包分析,...

mylxsw
5分钟前
0
0
mybatis3-javaapi

sqlSessionFactoryBuilder->sqlSessionFactory->sqlSession<-rowbound<-resultHandler myBatis uses a Java enumeration wrapper for transaction isolation levels, called TransactionIsol......

writeademo
9分钟前
0
0
Java NIO:浅析I/O模型

也许很多朋友在学习NIO的时候都会感觉有点吃力,对里面的很多概念都感觉不是那么明朗。在进入Java NIO编程之前,我们今天先来讨论一些比较基础的知识:I/O模型。下面本文先从同步和异步的概念...

yzbty23
9分钟前
0
0
了解iOS消息推送一文就够:史上最全iOS Push技术详解

本文作者:陈裕发, 腾讯系统测试工程师,由腾讯WeTest整理发表。 1、引言 开发iOS系统中的Push推送,通常有以下3种情况: 1)在线Push:比如QQ、微信等IM界面处于前台时,聊天消息和指令都会...

JackJiang-
11分钟前
0
0
Mysql汉子转拼音

update t_app_city SET CITY_NAME_BEGIN = ELT(INTERVAL(CONV(HEX(LEFT(CONVERT(CITY_NAME USING gbk),1)),16,10), 0xB0A1,0xB0C5,0xB2C1,0xB4EE,0xB6EA,0xB7A2,0xB8C1,0xB9FE,0xBBF7, 0xBFA......

尘叙缘
13分钟前
0
0
大数据构建智慧城市“新引擎”,加速推进新旧动能转换

——“大数据与智慧城市”技术交流分享会——济南站召开 7月13日,“大数据携手智慧城市,助力山东新旧动能转换”技术交流分享会——济南站在山东信息通信技术研究院会议室成功举办,此次会议...

左手的倒影
14分钟前
2
0
tomcat 学习笔记之 Session管理

1、Catalina 通过一个 Session 管理器的组件来管理建立的Session 对象 该组件由 org.apache.catalina.Manager 接口表示 Session 管理器必须与一个 Context 关联 Session 管理器负责,创建、更...

职业搬砖20年
15分钟前
0
0
jquery获取input框的几种方式

//如何用jquery获取<input id="test" name="test" type="text"/>中输入的值?$(" #test ").val()$(" input[ name='test' ] ").val()$(" input[ type='text' ] ").val()$(" input[ ......

gulf
18分钟前
0
0
gradle的环境变量的配置

gradle的环境变量的配置 1.首先下载jdk,并且配置jdk的环境变量. 2.找到自己AS安装gradle的目录 我自己的目录为:F:\Android Studio3.1.3\gradle\gradle-4.4 创建环境变量:GRADLE_PATH: F:\A...

android-key
24分钟前
0
0
saltstack配置apache

1.相关配置 #vim /etc/salt/master //打开如下内容的注释 file_roots: base: - /srv/salt #mkdir /srv/salt #vim /srv/salt/top.sls base: 'slaver.test.com': - apache 注意:若换成 '*',则......

硅谷课堂
25分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部