• 技术文章 > css教程

    text-overflow属性怎么用

    青灯夜游 青灯夜游 2019-02-11 15:43:31 原创 134
    text-overflow属性用于指定当文本溢出包含它的元素时,应该发生的事情。

    CSS3 text-overflow属性

    作用:text-overflow 属性规定当文本溢出包含元素时发生的事情。

    语法:

    text-overflow: clip|ellipsis|string;

    clip:修剪文本。

    ellipsis:显示省略符号来代表被修剪的文本。

    string:使用给定的字符串来代表被修剪的文本。

    注:所有主流浏览器都支持 text-overflow 属性。

    CSS3 text-overflow属性的使用示例

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <style> 
    div.test
    {
    white-space:nowrap; 
    width:12em; 
    overflow:hidden; 
    border:1px solid #000000;
    }
    div.test:hover
    {
    text-overflow:inherit;
    overflow:visible;
    }
    </style>
    </head>
    <body>
    <p>将鼠标移动到框内,查看效果.</p>
    <div class="test" style="text-overflow:ellipsis;">This is some long text that will not fit in the box</div>
    <br>
    <div class="test" style="text-overflow:clip;">This is some long text that will not fit in the box</div>
    </body>
    </html>

    效果图:

    1.gif

    本文参考:https://www.html.cn/book/css/properties/user-interface/text-overflow.htm

    以上就是text-overflow属性怎么用的详细内容,更多请关注php中文网其它相关文章!

    第五期线上培训班
    专题推荐: text-overflow属性 CSS3
    上一篇:text-wrap属性怎么使用 下一篇:text-outline属性怎么用

    相关文章推荐

    • 关于css中text-overflow属性与文本截断的示例代码分享 • 总结css中的text-overflow属性 • word-wrap和text-overflow有什么不同?两种属性详解 • text-overflow:ellipsis在火狐浏览器中的用法

    全部评论我要评论

  • 取消 发布评论 发送
  • PHP中文网