css怎么实现多行文本溢出隐藏-木庄网络博客

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

在css中，可使用overflow属性来实现多行文本溢出隐藏，只需要给文本元素添加“overflow: hidden;”样式即可。overflow属性规定当内容溢出元素框时发生的事情，当值设置为“hidden”时，会设置溢出部分不可见。

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

在css中，可使用overflow属性来实现多行文本溢出隐藏。

overflow属性规定当内容溢出元素框时发生的事情。

这个属性定义溢出元素内容区的内容会如何处理。属性值：

hidden：内容会被修剪，并且其余内容是不可见的。
scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            div {
                background-color: pink;
                width: 150px;
                height: 150px;
                overflow: hidden
            }
        </style>
    </head>
 
    <body>
    <p>如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。</p>
 
    <div>
    这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，
    用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。
    默认值是 visible。
    </div>
    </body>
 
</html>