css如何设置一行字显示不完隐藏-木庄网络博客

本文摘自PHP中文网，作者青灯夜游，侵删。

css中可利用overflow属性来设置一行字显示不完就隐藏；只需给文字的盒子元素添加“overflow:hidden;”样式，设置当内容溢出元素框时，将文字内容修剪，且溢出部分不可见即可。

本教程操作环境：windows7系统、css3&&html5版、Dell G3电脑。

（学习视频分享：css视频教程）

在css中，可以通过“overflow:hidden;”样式来设置。

代码：

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="utf-8">
        <style>
            div{
                width: 200px;
                border: 1px solid red;
                white-space: nowrap;
            }
            .gdou {
                 
                background: pink;
                text-overflow: ellipsis;
                overflow: hidden;
                 
            }
        </style>
    </head>
 
    <body>
        <div>
            这一行很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的。
        </div><br />
        <div class='gdou'>
            这一行很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的。
        </div>
    </body>
 
</html>