`
JavaSam
  • 浏览: 951700 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

DIV的内容自动换行

 
阅读更多

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下就都能正确换行,而

且要注意,单词间的空格不能用来代替,不然不能正确换行。

分享到:
评论

相关推荐

    DIV CSS 图片自动换行

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

    可编辑并且能够自动换行的div

    标题所提到的“可编辑并且能够自动换行的div”,实际上是在讨论如何创建一个具有文本编辑功能的 `div` 元素,并且在用户输入文字时能自动换行,保持其形状不变。这涉及到 HTML、CSS 以及可能的 JavaScript 技术。 ...

    html中div不自动换行、强制不换行的具体实现

    1.用标签实现不换行 复制代码代码如下: <div>Hello world!<nobr> Hello world!<nobr></div> ...4.如果是两个div,可使用float实现不换行 复制代码代码如下: <div class=”class1″>hello </div> <div cla

    html内容超出了div的宽度如何换行让内容自动换行

    在工作中评论内容测试遇到评论着的评论内容为:“dddddddddddddddddddddddddddddddddddddddddddddddddd”,错误的评论,在显示评论列表的时候因为有固定宽,但是显示的内容超出的了div的宽,在这种情况下我们需要...

    html中表格td内容自动换行

    HTML 中表格 TD 内容自动换行 HTML 中让表格 TD 中的多余字体自动换行是前端开发中常见的问题。今天,我们将讨论如何使用 CSS 来控制 TD 中的换行。 强制不换行 在 IE 的 TD 中,如果我们没有指定宽度,使用 `...

    div嵌套的div溢出时换行

    当我们希望div在溢出时自动换行,而不是隐藏或显示滚动条,可以采用以下方法: - `display: flex`:使用弹性布局,通过设置`flex-wrap: wrap`可以让子元素在必要时换行。 - `white-space: nowrap` 和 `white-...

    DIV 文字可以换行但是纯数字和字母不可以换行解决方案

    `break-word`值表示如果一个单词过长,则会在适当的位置(通常是单词内部)自动换行,避免内容溢出容器边界。 - **`word-break`**:此属性决定了当文本需要被断开时如何处理。`break-all`值表示在任何字符之间都...

    字体超过div范围自动换行

    标题“字体超过div范围自动换行”及描述“字体超过div范围自动换行”,明确指出了一种解决方案——利用CSS属性使文本在超出`div`容器范围时自动换行。下面将深入探讨这一主题,包括相关CSS属性的使用方法、应用场景...

    button自适应高度和自动换行

    "button自适应高度和自动换行"这个主题主要关注如何让按钮在不同屏幕尺寸和内容长度下保持良好的视觉效果。以下是对这个主题的详细解释: 一、自适应高度 1. CSS Flexbox:使用Flexbox布局模型可以轻松实现按钮的...

    英文自动换行怎样解决

    - **Break-word**:当内容超出容器边界时,文本会自动换行到下一行,并在必要时进行单词断行。这对于包含长单词或长字符串的英文文本特别有用。 ##### 2. `word-break` - **Normal**:这是默认值。它允许在单词内...

    jsp页面Table自动换行

    在网页设计中,表格的换行通常是由于表格内容过多,超过了容器(如div或浏览器窗口)的宽度,导致表格需要在视觉上分成多行显示。在JSP中,这可以通过CSS样式和HTML属性来控制。 【描述】提到的“Linux文档”可能是...

    多个div能不换行吗?

    关于“多个 div 能不换行吗?”这个问题,实际上涉及到 CSS 的布局管理和元素的盒模型。让我们深入探讨一下如何让多个 `div` 元素在同一行内显示,并讨论如何使父容器自适应子元素的大小。 首先,我们要理解默认...

    CSS 文字自动换行

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

    Android Flowlayout:LinearLayout内部控件自动换行

    在`Android Flowlayout`中,当一行无法容纳更多的子视图时,它们会自动换行到下一行,类似于HTML中的`<div>`布局或者CSS的`display: flex`。这种布局方式使得开发者无需精确计算每个子视图的位置和大小,而是由...

    vue flex 布局实现div均分自动换行的示例代码

     一、关于flex布局我建议去看一下http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html这篇博客,我们主要用到flex布局的一个换行属性,它是flex-wrap: wrap,自动换行。 二、vue代码 (1)html部分: <div...

    网页英文自动换行代码

    ### 网页英文自动换行技术解析 #### 背景介绍 在网页设计与开发过程中,文本的排版是非常重要的一环。不同于中文文本,英文文本在默认情况下不会自动进行换行处理,这可能会导致长单词或URL超出显示区域而被截断...

    FlowLayout自动换行功能

    `FlowLayout`是一个自定义布局,它扩展了Android原生的布局系统,提供了自动换行的功能,使得在一行内无法完全显示的组件能够自然地流到下一行,类似于HTML中的`<div>`布局或CSS的`display: flex`布局。这种布局模式...

    动态添加标签与自动换行

    同时,可以结合事件监听器来响应用户的操作,实时更新页面内容并实现自动换行。 6. **响应式设计**: 随着设备屏幕尺寸的多样化,动态添加标签时要考虑响应式设计,使内容在不同设备上都能正确显示。可以使用媒体...

Global site tag (gtag.js) - Google Analytics