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

css强制html不换行 css强制英文单词断行

    博客分类:
  • css
阅读更多


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

自动换行

div{
word-wrap: break-word;
word-break: normal;
}

强制英文单词断行

div{
word-break:break-all;
}



CSS设置不转行:


overflow:hidden 隐藏
white-space:normal 默认
pre 换行和其他空白字符都将受到保护
nowrap 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象


设置强行换行:
word-break:
normal ; 依照亚洲语言和非亚洲语言的文本规则,允许在字内换行
break-all :  该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all :  与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本与之间的高度解决办法



英文不换行

CSS里加上 word-break: break-all; 问题解决。这个问题只有IE才有,在FF下测试,FF可以自己加滚动条,这样也不影响效果

建议大家做Skin时,记得在body里加 word-break: break-all; 这样可以解决IE的框架被英文撑开的问题

以下引用word-break的说明, 注意word-break 是IE5+专有属性

语法:

word-break : normal | break-all | keep-all

参数:

normal :  依照亚洲语言和非亚洲语言的文本规则,允许在字内换行
break-all :  该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all :  与所有非亚洲语言的normal相同。对于中文,韩文,日文,不允许字断开。适合包含少量亚洲文本的非亚洲文本

说明:

设置或检索对象内文本的字内换行行为。尤其在出现多种语言时。
对于中文,应该使用break-all 。
对应的脚本特性为wordBreak。请参阅我编写的其他书目。

示例:

div {word-break : break-all; }

分享到:
评论

相关推荐

    英文强制换行css 使用css强制英文单词断行代码

    在做企业站的英文版的时候,英文单词由于剩下的空间不足,导致整个单词都...强制英文单词断行复制代码代码如下:{ word-break:break-all; } CSS设置不转行: overflow:hidden 隐藏 white-space:normal 默认 pre 换行

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

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

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

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

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

    3. **CSS强制英文单词断行** 如果需要强制英文单词在任何地方断行,可以使用: ```css div { word-break: break-all; /* 强制单词在任意位置断行 */ } ``` 这种情况下,即使是完整的英文单词,如果长度超过...

    CSS强制中英文换行与不换行 强制英文换行示例

    只对中文起作用,强制换行 4. white-space:nowrap; 强制不换行,都起作用 5. white-space:nowrap; overflow:hidden; text-overflow:ellipsis;不换行,超出部分隐藏且以省略号形式出现(部分浏览器支持) 代码: ...

    css强制换行 css强制不换行的css方法

    在本文中,将讨论CSS中的换行控制技术,特别是如何使用CSS强制实现文本换行或阻止换行。这在网页设计和布局过程中非常重要,尤其是在处理表格、列表或其他需要精确控制文本流动的元素时。 首先,了解`word-break`...

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

    #### 三、CSS实现强制英文单词断行 如果需要强制在英文单词内部断行,可以使用`word-break: break-all;`。这种情况下,无论单词长度如何,都会在必要时打断单词换行。 **代码示例**: ```css div { word-break: ...

    CSS网页布局强制换行和强制不换行的属性讲解

    在CSS网页布局中,常常会遇到这样的问题,强制文字换行,而不是在一行内显示撑开容器影响布局。而有些时候可能会强制内容不换行,多出的部分隐藏... }强制英文单词断行p.www_jb51_com{  word-break:break-all; } CS

    css控制文字自动换行

    - **使用 `word-wrap: break-word`** 或者 **`word-break: break-all`** 实现强制断行。 - `word-wrap: break-word`:允许长单词或URL地址在必要时换行,避免溢出容器边界。 - `word-break: break-all`:对所有...

    CSS实现强制不换行、自动换行、强制换行的css代码

    但有时为了适应窄屏设备或特定布局,我们可能需要强制单词在任何地方断行。这时,可以使用`word-break`属性,并将其设置为`break-all`。然而,这样做可能会导致英文单词在非空格处被拆分,影响可读性。为避免影响...

    CSS强制换行对齐的实现方法

    以下是关于CSS强制换行对齐实现方法的详细知识点: 一、text-justify属性的基本用法 text-justify属性定义了如何在元素的文本中进行两端对齐。它可以接受以下几个值: 1. auto:这个值由浏览器决定如何进行两端...

    用CSS控制表格或单元格强制换行,防止表格被英文单词或中文撑大

    本文将详细介绍如何通过CSS控制表格或单元格强制换行,防止表格被英文单词或中文撑大。 首先,对于普通的`div`、`p`等块级元素,它们的默认样式`white-space`是`normal`,这意味着元素内的文本会在适当的地方自动...

    GridView一般换行与强制换行

    为了解决长文本不换行的问题,可以使用CSS属性`word-break`和`word-wrap`来实现强制换行。这两个属性可以控制文本在何处和何时换行,提供了一种更灵活的解决方案。 - **`word-break: break-all;`**:此属性会强制在...

    css文字换行

    2. **强制换行** 使用`white-space`属性可以控制元素内的空白处理。`white-space: break-all;`可以使单词在任意位置换行,而不仅仅是空格或标点符号处。 3. **断词** `word-break`属性用来控制单词的断词规则。`...

    CSS实现连续字符换行的方法

    连续字符的CSS换行,主要用到CSS的word-break属性,为其添加:break-all参数,这样的话字符会适应规定的宽度而自动换行,实际上这就是CSS的强制换行功能。 复制代码代码如下:<title>连续字符的CSS换行代码</...

    gridview一般换行,强制换行

    实现强制换行可以通过设置CSS样式来完成: 1. **`word-break: break-all`**:此样式会使得长单词或URL等能够被断开以适应容器宽度。 2. **`word-wrap: break-word`**:此样式会先尝试将文本按单词边界换行,若...

Global site tag (gtag.js) - Google Analytics