`
sisi1984117
  • 浏览: 156206 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类
最新评论

【转】CSS自动换行 与不换行

CSS 
阅读更多
word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行。

它们的区别就在于:

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)也行发生说明:设置或检索当当前行超过指定容器的边界时是否断开转行。

对应的脚本特性为wordWrap。请参阅我编写的其他书目。 语法: table-layout : auto | fixed 参数: auto : 默认的自动算法。布局将基于各单元格的内容。表格在每一单元格读取计算之后才会显示出来。速度很慢 fixed : 固定布局的算法。在这算法中,水平布局是仅仅基于表格的宽度,表格边框的宽度,单元格间距,列的宽度,而和表格内容无关说明:设置或检索表格的布局算法。对应的脚本特性为tableLayout。

建议:word-break 用3C检测会显示问题的,导致百度快照也会出问题-这个属性OPERA FIREFOX 浏览器也不支持 word-break属性可以用white-space:normal;来代替,这样在FireFox和IE下就都能正确换行,而且要注意,单词间的空格不能用 来代替,不然不能正确换行。


 在样式table_c_l 中 添加
word-wrap: break-word;
word-break: break-all;
是让英语汉语都换行;


如果添加white-space:nowrap;  就是英语汉语都不换行
分享到:
评论

相关推荐

    css自动换行 css自动换行 css自动换行

    css自动换行css自动换行css自动换行css自动换行css自动换行css自动换行css自动换行css自动换行css自动换行

    CSS 文字自动换行

    #### 知识点一:CSS自动换行的原理与方法 在Web开发中,实现文本的自动换行是一项常见的需求。本文档主要介绍了如何利用CSS来实现不同浏览器环境下的自动换行功能,并特别关注了对老旧浏览器如IE6和IE7的支持。 ##...

    DIV CSS 图片自动换行

    在网页设计中,"DIV CSS 图片自动换行"是一个常见的布局技巧,它涉及到CSS(层叠样式表)中的盒模型、布局模式以及响应式设计。这个技术主要用于展示一组图片,使得图片能够在页面中自动适应并换行排列,同时还可以...

    CSS自动换行

    CSS自动换行介绍........

    表格自动换行主义CSS属性

    ### 表格自动换行与CSS属性详解 #### 标题解析:表格自动换行主义CSS属性 在网页设计和开发过程中,为了更好地控制表格布局和文本显示效果,使用CSS来实现表格内的文本自动换行是一项非常实用的技术。标题中的...

    css 自动换行 强制换行属性 (firefox+ie)

    当处理文本内容时,特别是当文本长度不确定或包含长单词时,如何正确地进行自动换行和强制换行显得尤为重要。这是因为不恰当的换行处理可能导致页面布局的混乱,影响用户体验。本文将详细讲解CSS中的两个关键属性:`...

    文本框自动换行

    在许多应用场景中,例如聊天应用、编辑器或表单填写,我们需要实现文本框的自动换行功能,使得当用户输入的字符超过一行的宽度时,文本能够自动跳转到下一行,就像微信的输入框那样。这个特性对于提升用户体验至关...

    CSS中的强制换行与强制不换行

    ### CSS中的强制换行与强制不换行 在网页布局设计中,文本的换行处理是非常重要的一个方面。良好的文本换行不仅可以使页面看起来更加整洁美观,还能够提高用户的阅读体验。CSS(层叠样式表)提供了多种方式来控制...

    firefox css自动换行的实现方法

    ### Firefox CSS自动换行的实现方法 随着网页设计与开发技术的发展,良好的用户体验越来越成为网页设计的核心要素之一。其中,文本的排版处理是至关重要的环节。本文将详细介绍如何在Firefox浏览器中实现CSS自动...

    button自适应高度和自动换行

    在网页设计中,按钮(Button)的样式和布局是用户体验中的关键...以上代码创建了一个使用Flexbox布局的按钮容器,按钮会根据内容自动调整高度,并在容器宽度不足以容纳时自动换行。你可以根据项目需求调整样式和布局。

    html代码实现文字转图片的代码,自动换行

    我们使用了html2canvas库将id为text的div元素转换为canvas元素,并将canvas元素转换为...同时,我们使用了CSS样式控制文字的换行。最后,我们在页面上添加了一个按钮,点击按钮即可将文字转换为图片并显示在页面上。

    html中表格td内容自动换行

    这将解决长串英文字母不能自动换行的问题和 TD 中汉字自动换行问题。 总结 在这里,我们讨论了如何使用 CSS 来控制 TD 中的换行。我们学习了强制不换行和强制换行的实现方法,并介绍了相关的属性和实例。

    英文自动换行怎样解决

    本文将探讨如何有效地实现英文自动换行,并通过CSS属性如`word-wrap`和`word-break`来解决这一问题。 #### 二、CSS中的换行控制属性 在CSS中,有几种属性可以用来控制文本的换行行为,包括`word-wrap`和`word-...

    实现label文字以指定长度自动换行

    然而,系统默认的`Label`控件往往不具备自动换行的功能,这在处理长文本时可能会造成显示问题。为了克服这一限制,开发者们会编写自定义的程序来实现`Label`的文字自动换行功能。下面我们将详细讨论如何实现这一功能...

    通过css样式控制单元格内超长文本自动换行.doc

    CSS自动换行解决方案 CSS(Cascading Style Sheets)是一种用于描述HTML文档样式的语言,以解决HTML文档的布局、样式、文字排版等问题。今天,我们将讨论如何使用 CSS 样式控制单元格内超长文本自动换行,并解决...

    html转pdf的core-renderer.jar支持中文自动换行

    `core-renderer.jar` 是一个专为此目的设计的Java库,它能够将HTML内容转换成PDF,并且针对中文字符提供自动换行功能,同时还能保留CSS样式,从而保持原始网页的视觉效果。 1. **HTML转PDF**: HTML是一种标记语言,...

    css 不换行 自动换行 强制换行的实现方法

    ### CSS 实现文本不换行、自动换行与强制换行的方法 在Web开发中,对文本进行合理的换行处理是非常重要的,它不仅能够改善页面布局的美观度,还能够提高用户体验。本文将详细介绍如何使用CSS来实现文本的不换行、...

    jsp页面Table自动换行

    2. **CSS布局**:在JSP中,可以使用CSS来控制表格的样式,包括自动换行。例如,使用`word-wrap: break-word;`可以使单元格内的内容在单词边界处换行,避免溢出。`table-layout: fixed;`可以让表格根据预先设定的列宽...

Global site tag (gtag.js) - Google Analytics