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

    css如何实现不换行

    coldplay.xixicoldplay.xixi2021-04-15 17:25:49原创367

    css实现不换行的方法使用【word-break】属性规定自动换行的处理,可以让浏览器实现在任意位置的换行,语法为【word-break: normal|break-all|keep-all】。

    本教程操作环境:windows7系统、css3版,DELL G3电脑。

    word-break 属性规定自动换行的处理方法。通过使用 word-break 属性,可以让浏览器实现在任意位置的换行。

    语法:

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

    属性值:

    normal 使用浏览器默认的换行规则。

    break-all 允许在单词内换行。

    keep-all 只能在半角空格或连字符处换行。

    示例:

    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    p.test1
    {
    width:11em; 
    border:1px solid #000000;
    word-break:hyphenate;
    }
    p.test2
    {
    width:11em; 
    border:1px solid #000000;
    word-break:break-all;
    }
    </style>
    </head>
    <body>
    <p class="test1">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>
    <p class="test2">This is a veryveryveryveryveryveryveryveryveryvery long paragraph.</p>
    <p><b>注释:</b>目前 Opera 不支持 word-break 属性。</p>
    </body>
    </html>

    效果图:

    a20c50faeae8775091e80df22b5c925.png

    相关学习推荐:css教程

    以上就是css如何实现不换行的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css 不换行
    上一篇:css如何设置段落缩进 下一篇:css三种样式表写法是什么
    大前端线上培训班

    相关文章推荐

    • css怎样设置p标签不换行• php r n 不换行怎么办• css怎么让li强制不换行• html table怎么实现不换行显示• css ul 不换行怎么实现

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网