滚动条·溢出内容显示省略号

醉挽清欢

已于 2022-01-21 19:40:54 修改

阅读量251

点赞数

分类专栏： css 文章标签： css

于 2022-01-11 20:54:08 首次发布

本文链接：https://blog.csdn.net/weixin_51610980/article/details/122406960

版权

css 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

滚动条

`1.overflow: auto;`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="">
</head>
<style>
    div{
        margin: auto;
        height: 200px;
        width:400px;
        background-color: aqua;
        font-size: 20px;
        overflow: auto;
    }
</style>
<body>
 <div>西安西安西安西安西安西安西安西安西安西安西安西安
    西安西安西安西安西安西安西安西安西安西安西安西安
    西安西安西安西安西安西安西安西安西安西安西安西安
    <!-- 西安西安西安西安西安西安西安西安西安西安西安西安
    西安西安西安西安西安西安西安西安西安西安西安西安
    西安西安西安西安西安西安西安西安西安西安西安西安
    西安西安西安西安西安西安西安西安西安西安西安西安
    西安西安西安西安西安西安西安西安西安西安西安西安
    西安西安西安西安西安西安西安西安西安西安西安西安 -->

 </div>
</html>

效果图如下：
当内容没有充满容器时
在这里插入图片描述
当内容溢出容器时，会显示有滚动条

2.`overflow:scroll;`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="">
</head>
<style>
    div{
        margin: auto;
        height: 200px;
        width:400px;
        background-color: aqua;
        font-size: 20px;
        overflow:scroll;
    }
</style>
<body>
 <div>西安西安西安西安西安西安西安西安西安西安西安西安
    西安西安西安西安西安西安西安西安西安西安西安西安
    西安西安西安西安西安西安西安西安西安西安西安西安
    <!-- 西安西安西安西安西安西安西安西安西安西安西安西安
    西安西安西安西安西安西安西安西安西安西安西安西安
    西安西安西安西安西安西安西安西安西安西安西安西安
    西安西安西安西安西安西安西安西安西安西安西安西安
    西安西安西安西安西安西安西安西安西安西安西安西安
    西安西安西安西安西安西安西安西安西安西安西安西安 -->

 </div>


</div>
</html>

效果图如下：
当内容没有充满容器时也会显示滚动条

在这里插入图片描述
当内容溢出容器时，也会有滚动条

溢出部分显示省略号

方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="">
</head>
<style>
    div{
        height: 50px;
        width:150px;
        font-size: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>
<body>
 <div>西安西安西安西安西安西安西安西安西安西安西安西安</div>


</div>
</html>