• 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; }
  • 相关阅读:
    父子进程 signal 出现 Interrupted system call 问题
    一个测试文章
    《淘宝客户端 for Android》项目实战 html webkit android css3
    Django 中的 ForeignKey ContentType GenericForeignKey 对应的数据库结构
    coreseek 出现段错误和Unigram dictionary load Error 新情况(Gentoo)
    一个 PAM dbus 例子
    漫画统计学 T分数
    解决 paramiko 安装问题 Unable to find vcvarsall.bat
    20141202
    js
  • 原文地址:https://www.cnblogs.com/rightzhao/p/3471644.html
Copyright © 2020-2023  润新知