`
wangxingguang
  • 浏览: 28913 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

设置div中文字超出时自动换行

阅读更多

对于div强制换行
1.IE浏览器)white-space:normal; word-break:break-all;这里前者是遵循标准。
#wrap{white-space:normal; width:200px; }
或者
#wrap{word-break:break-all;width:200px;}

2.Firefox浏览器)white-space:normal; word-break:break-all;overflow:hidden;

同样的FF下也没有很好的实现方法,只能隐藏或者加滚动条,当然不加滚动条效果更好!
#wrap{white-space:normal; width:200px; overflow:auto;}
或者
#wrap{word-break:break-all;width:200px; overflow:auto; }

对于table强制换行
1. (IE
浏览器)使用样式table-layout:fixed

2.(IE浏览器)使用样式table-layout:fixednowrap

3. (IE浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixednowrap

4.(Firefox浏览器)在使用百分比固定td大小情况下使用样式table-layout:fixednowrap,并且使用div。

-----------------------------------------------------------------------------------------------------------------------------------

三、强制不换行:div{white-space:nowrap;}

四、自动换行:div{ word-wrap: break-word; word-break: normal;}

五、强制英文单词断行:div{word-break:break-all;}

分享到:
评论

相关推荐

    DIV CSS 图片自动换行

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

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

    在网页设计中,经常会遇到一个有趣的现象:当我们在一个`<div>`容器内输入文本时,文本能够正常换行,但若该文本只包含纯数字或字母时,却无法自动换行。这可能会影响页面的布局与美观性。为了解决这一问题,我们...

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

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

    div嵌套的div溢出时换行

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

    字体超过div范围自动换行

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

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

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

    div中英文无法自动换行的解决办法

    但是,如果输入的是英文字母,那么,无论你div设定宽度为多少,英文字母都是不换行直接在同一行输出,导致div的宽度远远超出设定的大小。 原因:这是因为div中,英文字母之间没有空格的话,它会默认认为这是一个...

    英文自动换行怎样解决

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

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

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

    网页英文自动换行代码

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

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

    自动换行指的是当元素内容超出其父元素的宽度时,元素会自动移动到下一行。这种行为在大多数布局中是必需的,但也存在例外情况,比如需要在同一行显示多个元素。 1. 使用`<nobr>`标签实现不换行 `<nobr>`标签并...

    动态添加标签与自动换行

    在IT行业中,动态添加标签与自动换行是前端开发中常见的需求,特别是在构建用户界面时。这个主题涉及到HTML、CSS以及可能的JavaScript技术,用于创建响应式和灵活的布局。以下将详细介绍这些知识点: 1. **HTML ...

    html中的div、td 、p 等容器内强制换行和不换行的实现

    对于`div`的嵌套情况,如果希望内层`div`的内容能根据内容自动换行,只需在外层`div`设置宽度和`white-space: nowrap`,内层`div`则会根据内容自动调整。 **word-break 和 word-wrap 属性的区别:** - `word-break:...

    兼容多浏览器,兼容 div、p、td 的强制不换行及强制换行.

    1. **使用`word-wrap`和`word-break`解决`td`中无法自动换行的问题**: ```html ; word-break: break-all;" valign="bottom"> 文本测试信息...(重复) ``` 2. **解决长串英文字母无法自动换行的问题*...

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

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

    多浏览器支持CSS 容器内容超出(溢出)支持自动换行

    为了解决这个问题,开发者通常会选择让文本在超出容器宽度时自动换行。 #### 二、解决方案 实现文本自动换行的关键在于使用正确的CSS属性组合。下面是一些常用的CSS属性及其兼容性说明: 1. **`word-break: break...

Global site tag (gtag.js) - Google Analytics