美文网首页
超出的文字显示省略号

超出的文字显示省略号

作者: xing222333 | 来源:发表于2019-03-28 22:49 被阅读0次
    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
    
            div{
                width: 50px;
                height: 20px;
                border:1px solid pink;
    
                /*强制在一行显示*/
                white-space: nowrap;
                /*隐藏超出的文字*/
                overflow: hidden;
                /*超出文字显示省略号*/
                text-overflow: ellipsis;
            }
        </style>
    </head>
    <body>
    <div class="div">
        三毛流浪记
    </div>
    </body>
    </html>
    

    相关文章

      网友评论

          本文标题:超出的文字显示省略号

          本文链接:https://www.haomeiwen.com/subject/eimhbqtx.html