zoukankan      html  css  js  c++  java
  • 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; }
  • 相关阅读:
    CodeForces 7B
    CodeForces 4D
    离散化
    线段树入门
    洛谷 P3951 小凯的疑惑(赛瓦维斯特定理)
    Codeforces 1295D Same GCDs (欧拉函数)
    Codeforces 1295C Obtain The String (二分)
    Codeforces 1295B Infinite Prefixes
    Codeforces 1295A Display The Number(思维)
    Codeforces 1294F Three Paths on a Tree(树的直径,思维)
  • 原文地址:https://www.cnblogs.com/afuge/p/2882545.html
Copyright © 2011-2022 走看看