word-wrap word-break white-space 用法。
一、word-wrap使用:
语法:
word-wrap : normal | break-word
取值说明:
1、normal和break-word,其中normal为默认值,当其值为normal控制连续文本换行(允许内容顶开容器的边界,换句话说内容可以撑破容器);
2、break-word将内容在边界内换行(不截断英文单词换行,截断英文单词换行需要使用word-break:all属性),我们先来看两个简单的实例:
二、word-break使用:
上面我们使用word-wrap:break-word只能在内容中换行,而不能实现词内换行,前面提到过如果需要词内换行,我们需要使用word-break属性,下面我们就一起来看看这个属性:
语法:
word-break:normal | break-all | keep-all
取值说明
1、normal为默认值,如果设置为默认值时中文则到边界处的汉字换行,如果是英文整个单词换行,如果出现某个单词长度过长,则会撑破容器,如果边框为固定属性,则后面部分将无法显示;
2、break-all:可以强行截断英文单词,达到词内换行效果
3、keep-all:不允许字断开。如果是中文将把前后标点符号内的一个汉字短语整个换行,英文单词也整个换行,如果出现某个英文字符长度超过边界,则后面的部分将撑破容器,如果边框为固定属性,则后面部分无法显示
当以上word-wrap:break-word放在<pre>和<table>标签中时,在Firefox和Opera下是不会换行的,
三、white-space属性:
white-space语法
white-space: normal || pre || nowrap || pre-line || pre-wrap || inherit
取值说明
1、normal:为其默认值。空白处会被浏览器忽略,往往可以通过设置这个值恢复到默认值下
2、pre:空白处会被浏览器保留,其行为方式就类似于HTML中的<pre>标签
3、nowrap:文本不会换行,文本会在同一行上,直到碰到了换行标签<br />为止,
4、pre-line:合并空白符序列,但保留换行符,此属性不支持IE7.0-,Firefox30-,Opera9.2-下以版本浏览器
5、pre-wrap:保留空白符序列,但是正常进行换行,此属性值不支技IE70-,Firefox3.0-版本浏览器,
6、inherit:规定应该从父元素继承white-space属性的值,此属性值在所有的IE版本都不支持
另外一点就是word-wrap和break-word直接应用在table中是没有效果的,为了解决这个bug,只能在table中加上下面的属性:
table {
table-layout: fixed;
width: 100px;/*设置表格宽度*/
}
一、pre标签自动换行:
pre{
white-space: pre; /* CSS 2.0 */
white-space: pre-wrap; /* CSS 2.1 */
white-space: pre-line; /* CSS 3.0 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -moz-pre-wrap !important; /* Mozilla */
white-space: -hp-pre-wrap; /* HP Printers */
word-wrap: break-word; /* IE 5+ */
}
二、td标签自动换行
table {
table-layout: fixed;
width: *** px;
} table td {
overflow: hidden;
word-wrap: break-word;
}
三、除pre,td标签外其他标签自动换行:
element {
overflow: hidden;
word-wrap: break-word;
}
有人说使用下面这样的写法
element {
word-wrap: break-word;
break-word: break-all;
}
四、标签内容强制不换行:
element {
white-space: nowrap;
word-break: keep-all;
}
word-wrap word-break white-space 用法。的更多相关文章
- word break和word wrap
默认情况下,如果同一行中某个单词太长了,它就会被默认移动到下一行去: word break(normal | break-all | keep-all):表示断词的方式 word wrap(norma ...
- word wrap 解惑
源起 我们经常需要“修复”一个老生常谈的“bug”,那就是文本的自动换行问题.在专业术语上,这种期望得到的渲染现象被称作“word wrap”,即文本处理器有能力把超出页边的整个词自动传到下一行. 在 ...
- reverse the string word by word
题目:Given an input string, reverse the string word by word. For example,Given s = "the sky is bl ...
- LeetCode 5:Given an input string, reverse the string word by word.
problem: Given an input string, reverse the string word by word. For example: Given s = "the sk ...
- Microsoft.Office.Interop.Word 创建word
Microsoft.Office.Interop.Word 创建word 转载:http://www.cnblogs.com/chenbg2001/archive/2010/03/14/1685746 ...
- [转载]jQuery中wrap、wrapAll和wrapInner用法以及区别
原文地址:jQuery中wrap.wrapAll和wrapInner用法以及区别作者:伊少君 原文: <ul> <li title='苹果'>苹果</li> ...
- dom4j解析xml报错:Nested exception: org.xml.sax.SAXParseException: White space is required between the processing instruction target and data.
采用dom4j方式解析string类型的xml xml: String string="<?xmlversion=\"1.0\" encoding=\ ...
- C#用Microsoft.Office.Interop.Word进行Word转PDF的问题
之前用Aspose.Word进行Word转PDF发现'\'这个字符会被转换成'¥'这样的错误,没办法只能换个方法了.下面是Microsoft.Office.Interop.Word转PDF的方法: p ...
- 《Java基础——break与continue用法详解》
Java基础--break与continue用法详解 1. break语句: 规则: 1. 仅用于循环语句和switch语句当中,用于跳出循环. 2. 当只有一层循环时,则直接跳出循环,不 ...
- win32com操作word(2):常用用法
一.对象的位置关系: 1.Range属性位于(部分): Selection__Section__Cell__Paragraph__Table__Bookmark__Comment__Row__List ...
随机推荐
- [SAP ABAP开发技术总结]程序自己以JOB方式运行
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- 从xubuntu-->windows xp
捣鼓了两个月的ubuntu之后我又乖乖的回到了windows的怀抱,不是抛弃linux而是要适应身边的环境. 身边的板子的驱动基本上都是xp的老一点的还是vista的,让人情何以堪. 我努力克服了,用 ...
- Spring的DI(Ioc) - 注入bean 和 基本数据类型
注入bean有两种方式: 注入其他bean: 方式一 <bean id="orderDao" class="cn.itcast.service.OrderDaoBe ...
- RFC总结-SD模块
1.客户主数据1.1 创建.修改客户主数据*该函数更新所有字段,X表用来新增和修改,Y表为删除 CALL FUNCTION 'SD_CUSTOMER_MAINTAIN_ALL' EXPORTIN ...
- shiro连接数据库
建一个jdbcRealm.ini [main] jdbcRealm=org.apache.shiro.realm.jdbc.JdbcRealm dataSource=com.mchange.v2.c3 ...
- 笔记本_thinkpad_e40_FN
1. 开机时按F10进入bios 然后在 bios 中选择 system configuration,看一下其中的 action keys mode .如果此选项后面为 enable 的话,是不需要按 ...
- hibernate的主键生成策略
一共是13种,其中包括native native: 对于 oracle 采用 Sequence 方式,对于MySQL 和 SQL Server 采用identity(自增主键生成机制),native就 ...
- asp.net实现大文件上传
需要下载NeatUpload插件 上传页面: <%@ Page Language="C#" AutoEventWireup="true" CodeFile ...
- iOS开发之 xcode6 APP 打包提交审核详细步骤
一. 在xcode6.1和ios10.10.1环境下实现app发布 http://blog.csdn.net/mad1989/article/details/8167529 http://jingya ...
- uva 11324 The Largest Clique
vjudge 上题目链接:uva 11324 scc + dp,根据大白书上的思路:" 同一个强连通分量中的点要么都选,要么不选.把强连通分量收缩点后得到SCC图,让每个SCC结点的权等于它 ...