• 技术文章 >web前端 >css教程

    css word-break属性的具体使用方法介绍

    黄舟黄舟2017-06-20 10:56:17原创1152
    处理网页内的文本就会有各种的换行的情况发生,那么页面的元素在什么样的情况下进行换行操作呢?我们可以通过word-break 代码来精确的控制这个换行。

    语法:

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

    参数:

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

    说明:

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

    示例:

    div {word-break : break-all; }

    应用代码。我们在test 元素内给 word-break进行了参数的确定。

    p.test {word-break:hyphenate;}

    在浏览器的支持性方面, word-break还是非常符合要求的。浏览器基本都支持这个代码。

    word-break 的用法。它的默认值为 normal 它的继承性为 yes 它的版本为 CSS3

    java 的用法。object.style.wordBreak="keep-all"在这个java 语句当中,我们又给出了一个不同的参数值。

    代码的语法。

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

    这个代码一共有三种不同的情况。normal 是浏览器默认。break-all 是单词内换行。keep-all 是半角空格或者连字符。

    style 流程,我们给出了两种不同的方式让学习者进行对比。同时,我们也可以看见,对于外框的定义也是同时启用的。

    <style> 
    p.test1
    {
    width:13em; 
    border:2px solid #000000;
    word-break:hyphenate;
    }
    
    p.test2
    {
    width:13em; 
    border:2px solid red;
    word-break:break-all;
    }
    </style>

    以上就是css word-break属性的具体使用方法介绍的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    上一篇:css中关于direction与unicode-bidi的对比 下一篇:css自动换行的word-break与word-wrap的区别
    千万级数据并发解决方案

    相关文章推荐

    • css3怎样实现不是直角的菱形效果• css样式中有文字描边吗• css3怎样实现翻转2次效果• 12个值得收藏的 CSS 技巧!!• CSS如何进行性能优化?优化小技巧分享
    1/1

    PHP中文网