- 浏览: 180187 次
- 性别:
- 来自: 福建
最新评论
-
卡殿Love:
你好! 谢谢你的文章让我知道其中的原因,目前正在做手机端上的项 ...
web手机开发(iPhone和Andriod)关于position:fixed 属性的讨论
一般情况下,元素拥有默认的white-space:normal(自动换行,PS:不换行是white-space:nowrap),当录入的文字超过定义的宽度后会自动换行,但当录入的数据是一堆没有空格的字符或字母或数字(常规数据应该不会有吧,但有些测试人员是会这样子做的),超过容器宽度时就会把容器撑大,不换行。
解决方法(以IE,chrome,FF为测试浏览器):
以下是对这两种方法的区别说明:
1,word-break:break-all 例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长(congratulation等),它会把单词截断,变成该行末端为conra(congratulation的前端部分),下一行为tulation(conguatulation)的后端部分了。
2,word-wrap:break-word 例子与上面一样,但区别就是它会把congratulation整个单词看成一个整体,如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,而不会把单词截断掉的。
3,word-break;break-all 支持版本:IE5以上 该行为与亚洲语言的 normal 相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本。
word-wrap:break-word 支持版本:IE5.5以上 内容将在边界内换行。如果需要,词内换行( word-break )也将发生。表格自动换行,避免撑开。
语法:word-break : normal | break-all | keep-all
参数: normal : 依照亚洲语言和非亚洲语言的文本规则,允许在字内换行
break-all : 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all : 与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本
语法: word-wrap : normal | break-word
参数: normal : 允许内容顶开指定的容器边界
break-word : 内容将在边界内换行。如果需要,词内换行(word-break)也行发生说明:设置或检索当当前行超过指定容器的边界时是否断开转行。
建议:word-break 用3C检测会显示问题的,导致百度快照也会出问题-这个属性OPERA FIREFOX 浏览器也不支持 word-break属性可以用white-space:normal;来代替,这样在FireFox和IE下就都能正确换行,而且要注意,单词间的空格不能用 来代替,不然不能正确换行。
解决方法(以IE,chrome,FF为测试浏览器):
{ word-break:break-all; /*支持IE,chrome,FF不支持*/ word-wrap:break-word;/*支持IE,chrome,FF*/ }
以下是对这两种方法的区别说明:
1,word-break:break-all 例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长(congratulation等),它会把单词截断,变成该行末端为conra(congratulation的前端部分),下一行为tulation(conguatulation)的后端部分了。
2,word-wrap:break-word 例子与上面一样,但区别就是它会把congratulation整个单词看成一个整体,如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,而不会把单词截断掉的。
3,word-break;break-all 支持版本:IE5以上 该行为与亚洲语言的 normal 相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本。
word-wrap:break-word 支持版本:IE5.5以上 内容将在边界内换行。如果需要,词内换行( word-break )也将发生。表格自动换行,避免撑开。
语法:word-break : normal | break-all | keep-all
参数: normal : 依照亚洲语言和非亚洲语言的文本规则,允许在字内换行
break-all : 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all : 与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本
语法: word-wrap : normal | break-word
参数: normal : 允许内容顶开指定的容器边界
break-word : 内容将在边界内换行。如果需要,词内换行(word-break)也行发生说明:设置或检索当当前行超过指定容器的边界时是否断开转行。
建议:word-break 用3C检测会显示问题的,导致百度快照也会出问题-这个属性OPERA FIREFOX 浏览器也不支持 word-break属性可以用white-space:normal;来代替,这样在FireFox和IE下就都能正确换行,而且要注意,单词间的空格不能用 来代替,不然不能正确换行。
发表评论
-
最小高度的定义
2011-03-18 10:33 998height:auto !important;IE6不可以识别 ... -
flash wmode参数详解
2010-10-29 10:50 857在做web开发中可能会遇到flash遮挡页面中元素的情况,无论 ... -
CSS 过滤器 兼容ie,火狐和谷歌
2010-10-28 10:58 3636这篇汇总主要是提供一些CSS不透明的详细介绍,代码示例和解释, ... -
合并图片工具
2010-06-05 08:27 933不错的合成图片的工具,还提供css样式 -
关于line-height设置
2010-03-12 14:08 1148一个小小属性就有那么多的学问,我们来一起了解一下关于line- ... -
区别IE6,IE7,IE8,FF
2010-02-27 13:53 1076区别IE6,IE7,IE8,FF 【区别符号】:「\9」、「 ... -
在ie6下出现“无法打开该地址,浏览器停止服务”的bug
2010-01-04 13:48 747曾经在开发中遇到两次,原因是某个标签没有闭合。 -
IE6下某些中文注释引发的css样式全乱 | IE6下PNG背景图片透明问题
2009-12-08 15:55 2390IE6下如果line-height超出本身区块的height高 ... -
!important认识
2009-12-08 15:07 1003在设计《网页设计师》 ... -
删除div中默认的高度(在ie中)
2009-11-03 17:20 1443<div style='width:100%;heigh ... -
杂谈jQuery中的 height innerHeight outerHeight
2009-10-30 14:38 3724html代码: <div style="wid ... -
去除和隐藏点击链接时出现的虚线框
2009-10-23 15:53 1288如何去除点击链接时出现的虚线框 有时候在一个页面用到收放功能 ... -
浮层浮动在select的标签上
2009-10-23 09:35 1118例如 <!-- ------------上传大附件 ... -
浮层的移动
2009-10-23 09:30 770使用 <script type="text/ ... -
1000张网页常用图片
2009-06-08 17:13 2019好东东,1000张网页常用图片 -
1000个网页小图标
2009-06-08 17:12 3700好东东,1000个网页小图标 -
50张Flash小图片
2009-06-08 17:11 1289好东西,50张Flash小图片 -
如何插入flash
2009-06-08 17:00 680<object classid="clsid: ... -
在静态图片特定位置做链接
2009-06-08 16:57 849<img src="file:///C|/Do ... -
如何让一个表单中的文本框中的文字垂直居中?
2009-06-08 16:46 1624如果用行高与高度的组在FF中是没有效果的,办法就是定义上下补白 ...
相关推荐
### CSS中的强制换行与强制不换行 在网页布局设计中,文本的换行处理是非常重要的一个方面。良好的文本换行不仅可以使页面看起来更加整洁美观,还能够提高用户的阅读体验。CSS(层叠样式表)提供了多种方式来控制...
本文将详细讲解两种主要的CSS强制性换行方法:`word-break:break-all` 和 `word-wrap:break-word`,并探讨它们之间的区别。 1. `word-break:break-all` 当设置 `word-break:break-all` 时,文本在遇到容器边界时,...
以下是关于CSS强制换行对齐实现方法的详细知识点: 一、text-justify属性的基本用法 text-justify属性定义了如何在元素的文本中进行两端对齐。它可以接受以下几个值: 1. auto:这个值由浏览器决定如何进行两端...
综上所述,通过合理的CSS设置,可以有效实现跨浏览器的强制不换行和强制换行功能,同时保证页面布局的一致性和良好的用户体验。开发者应根据实际需求选择合适的CSS属性组合,以达到最佳兼容性和性能。
本文将详细讲解CSS中的两个关键属性:`word-wrap` 和 `word-break`,它们可以帮助我们解决自动换行和强制换行的问题。 首先,我们来看`word-wrap`属性。这个属性主要用于控制当一个单词或内容过长,超出了其容器的...
实现强制换行可以通过设置CSS样式来完成: 1. **`word-break: break-all`**:此样式会使得长单词或URL等能够被断开以适应容器宽度。 2. **`word-wrap: break-word`**:此样式会先尝试将文本按单词边界换行,若...
在CSS(层叠样式表)中,自动换行是一个关键的概念,它关乎着文本在不同屏幕尺寸和布局下的可读性和美观性。本篇将详细探讨CSS如何实现文本的自动换行,以及相关的技巧和最佳实践。 首先,我们来看一个基本的自动...
3. **CSS强制英文单词断行** 如果需要强制英文单词在任何地方断行,可以使用: ```css div { word-break: break-all; /* 强制单词在任意位置断行 */ } ``` 这种情况下,即使是完整的英文单词,如果长度超过...
这里我们将详细探讨如何使用CSS实现强制不换行、自动换行以及强制换行,同时也会提及一些相关技巧。 1. **强制不换行** 当你希望某个文本内容在一个容器内不进行换行显示时,可以使用`white-space`属性并将其值...
总的来说,CSS中的自动换行涉及到`white-space`、`word-wrap`和`word-break`等属性,以及特定浏览器的兼容性处理。在处理连续数字和英文字符时,需要根据目标浏览器选择合适的解决方案。由于浏览器之间的差异,...
在CSS(层叠样式表)中,自动换行是一个关键的概念,它涉及到如何处理文本在容器内的布局,特别是在有限的空间内。本篇文章将深入探讨如何使用CSS来控制文本的换行,尤其是对于div、p这样的块级元素以及表格中的文本...
8. **非破坏性换行** 对于英文内容,`hyphens`属性可以开启自动连字符换行,使得单词在连字符规则允许的位置断开,提升阅读体验。`hyphens: auto;`在支持此特性的浏览器中效果显著。 9. **CSS预处理器** 使用Sass...
本文将深入探讨五种不同的自动换行策略,这些策略不仅能够满足基本的自动换行需求,更重要的是它们具有良好的浏览器兼容性,能够在IE、Chrome和Firefox等主流浏览器中稳定运行。 ### 一、使用`white-space`和`word-...
CSS中的word-break、word-wrap和white-space属性都是用来控制文本如何在容器内换行或者处理长单词或者字符串溢出容器边界的属性。尽管这三个属性的作用有些相似,但它们在处理文本换行的细节上有所不同,下面将详细...
本篇内容将围绕如何利用CSS属性来强制中英文进行换行或不换行,以及如何优雅地处理文本溢出的问题。 首先,我们来了解几个关键的CSS属性: 1. word-break:这个属性用于指定如何进行单词内的换行。它有三个值: -...
在CSS布局设计中,有效地控制文字的换行和裁剪对于网页的美观性和可读性至关重要。本篇文章将深入探讨CSS中的几个关键属性,包括`word-wrap`、`word-break`和`white-space`,以及如何利用它们来实现各种文字处理效果...
虽然这两款浏览器在处理某些HTML和CSS特性时可能存在差异,但可以通过一些方法来实现跨浏览器的字符强制换行。 字符强制换行通常是为了防止文本过长导致布局混乱或者超出容器边界。在HTML中,我们通常使用` `...