时代Java

CSS3 设置 HTML5 文本不换行，宽度超出部分自动显示省略号。

Xebcnor

工程师 (已认证)

原创分享签约作者

发表于教程文章

777

CSS3 设置 HTML5 文本不换行，宽度超出部分自动显示省略号，只需要设置3个属性：

1、设置文字超出范围不换行：
white-space：nowrap;

2、设置超出控件宽度部分范围隐藏：
overflow：hidden；

3、设置多余文本隐藏显示：
text-overflow：ellipsis;

整体：

 .row｛white-space：nowrap; overflow：hidden；text-overflow：ellipsis;｝

注意：父级容器必须设置宽度。

实例代码如下：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>CSS3 设置 HTML5 文本不换行，宽度超出部分自动显示省略号</title>
            <style type="text/css">
             div{
                /*父级容器必须设置宽度*/
                width: 200px;
                border:1px solid red;
             }
             .row{
                 white-space: nowrap;
                 overflow: hidden;
                 text-overflow: ellipsis;
             }
        </style>
    </head>
    <body>
        <div class="row">一、二、三、四、五、六、七、八、九、十</div>
    </body>
</html>

在线运行实例

本文系作者在时代Java发表，未经许可，不得转载。

如有侵权，请联系nowjava@qq.com删除。