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

word-wrap和word-break

    博客分类:
  • Css
阅读更多
word-wrap : normal | break-word

normal  :  默认值。允许内容顶开指定的容器边界
break-word  :  内容将在边界内换行。如果需要,词内换行( word-break )也将发生

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

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

    在ie浏览器中,英文单词如果过长会把div右边撑大,但firefox不会,它会自动判断,把超出的部分换到第二行,并自动断词,不会把一个单词拆开。
    中文不会出现这些问题,主要是英文中会有这些bug。这时如果想浏览器兼容,你就要巧妙运用word-wrap:break-word;word-break:break-all; ,style="overflow:auto;word-wrap:break-word;"可以让ie和ff兼容,但如果你用的是style="overflow:auto;word-break:break-all;"虽然表面上看浏览器是兼容了,但word-break:break-all;ie会强行把单词也断开,这样会让句子的意思都发生变化。所以最好的办法还是用style="overflow:auto;word-wrap:break-word;"。


分享到:
评论

相关推荐

    webfrom-列表文本内容自动换行 word-break-keep-all;word-wrap-n.pdf

    <asp:TemplateColumn HeaderText="OP CREATE USER" HeaderStyle-HorizontalAlign="center"> <HeaderStyle HorizontalAlign=... myDataGrid_d.Attributes.Add("style", "word-break:keep-all;word-wrap:normal");

    word-wrap与word-break 属性的概述及浏览器默认处理

    二、`word-wrap: break-word` 属性值 在某些特殊情况下,比如长单词(如品牌名)或者连续的非空格字符序列,可能会导致文本溢出容器。这时,可以使用 `word-wrap: break-word;` 来处理这种情况: ```css word-wrap...

    css中强制换行word-break、word-wrap、white-space区别实例说明

    复制代码代码如下:”c1″>safjaskflasjfklsajfklasjflksajflksjflkasfdsafdsfksafj</div><div class=c1>This is all English. This is all English. This is all English.</div><div class=c1>全是中文的情况。...

    word-wrap在firefox中不起作用的解决方法

    `word-wrap`有两个主要值:`normal` 和 `break-word`。默认情况下,大多数浏览器使用 `normal`,这意味着如果一个单词太长,它将不会被强制换行,而是可能会超出其容器。而`break-word`值则允许浏览器在必要时在长...

    word-break:break-all和word-wrap:break-word区别总结

    `word-break:break-all` 和 `word-wrap:break-word` 是CSS中用于控制文本换行的两个属性,它们都有各自的特点和适用场景。 首先,`word-break:break-all` 的作用是在任何可能的位置强制进行单词内部的换行。这意味...

    CSS3文本换行word-wrap解决英文文本超过固定宽度不换行

    `word-wrap`属性接受两个可能的值:`normal`和`break-word`。 ```css word-wrap: normal || break-word; ``` - **`normal`**:这是`word-wrap`的默认值。它遵循标准的换行规则,意味着如果单词过长,它将会超出...

    css word-break word-wrap 前台显示自动换行

    这意味着在这种设置下,只有当设置了`word-wrap`为`break-word`时,中文才可能换行,否则即使容器宽度不足以容纳整个中文单词,也不会换行。 2. **`word-break` 属性** - `word-break` 控制的是单词在什么情况下...

    CSS word-wrap同word-break的区别

    兼容 IE 和 FF 的换行 CSS 推荐样式 最好的方式是 word-wrap:break-word; overflow:hidden; 而不是 word-wrap:break-word; word-break:break-all; 也不是 word-wrap:break-word; overflow:auto; 在 IE 下没有任何...

    css文本换行属性word-wrap和white-space使用总结

    word-break:break-all和word-wrap:break-word表示强制换行,前者若英文字符过长自动截断,后者整个英文单词会换行! 而而我常会这样用: 复制代码代码如下: word-wrap:break-word; overflow:hidden; IE 下没有...

    浅析word-break work-wrap的区别

    object.style.wordBreak="keep-all"   值 描述 normal 使用浏览器默认的换行规则。 break-all 允许在单词内换行。 keep-all 只能在半角空格或连字符处换行。 兼容性: 举个栗子: CSS Co

    CSS属性探秘系列(一):word-break与word-wrap

    最后,我们讨论了word-break:break-all与word-wrap:break-word的区别。它们看似相似,实际上在实际使用中可能会有细微差别,通常通过实际的显示效果来观察和理解。在某些情况下,可能会出现需要选择使用其中一个属性...

    使用word-wrap来防止文字溢出

    word-wrap: break-word; overflow-x: hidden; width: 500px; /* 自定义宽度 */ } ``` 这样,大部分现代浏览器都会使用 `word-wrap` 来正确处理长单词,而旧版 IE 则会依赖 `overflow-x:hidden` 来隐藏溢出的部分...

    详解:34word-wrap

    word-wrap: break-word;也可以写成overflow-wrap: break-word;一样的哈, word-break: break-all;核心是:内容在宽度的邻界点就自动换行了哈(注意点,也就是说宽度邻界点那里放不下将要显示在这里的字符就换航了呀...

    css 英文换行 css(word-wrap/break)使纯英文数字自动换行

    word-wrap: break-word; word-break: break-all; } ``` 这样的设置使得内容在遇到边界时,既可以尝试在单词内部换行,又可以断开过长的单词,从而确保元素不会超出设定的宽度。但是,这种做法可能会破坏英文的...

Global site tag (gtag.js) - Google Analytics