zoukankan      html  css  js  c++  java
  • css实现强制不换行/自动换行/强制换行

    1、强制不换行

    div{ white-space:nowrap;} 

    2、自动换行

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

    3、强制英文单词断行

    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; }
  • 相关阅读:
    UVA 1386 Cellular Automaton
    ZOJ 3331 Process the Tasks
    CodeForces 650B Image Preview
    CodeForces 650A Watchmen
    CodeForces 651B Beautiful Paintings
    CodeForces 651A Joysticks
    HUST 1601 Shepherd
    HUST 1602 Substring
    HUST 1600 Lucky Numbers
    POJ 3991 Seinfeld
  • 原文地址:https://www.cnblogs.com/rightzhao/p/3471644.html
Copyright © 2011-2022 走看看