• 技术文章 >web前端 >css教程

    css3怎样设置超出的文本隐藏

    长期闲置长期闲置2021-12-08 16:02:14原创120

    在css中,可以利用overflow属性设置超出的文本隐藏起来,该属性用于规定当内容超出元素框的时候发生的事情,当属性的值为“hidden”时,超出的内容会被隐藏,语法为“文本元素{overflow:hidden;}”。

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

    css3怎样设置超出的文本隐藏

    在css中,想要设置超出的文本隐藏起来,可以利用overflow属性,overflow 属性规定当内容溢出元素框时发生的事情。

    属性值如下:

    17.png

    示例如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style type="text/css">
                div{
                    width:200px;
                    height:50px;
                    border:1px solid black;
                    overflow:hidden;
                }
            </style>
        </head>
        <body>
            <div>超出隐藏超出隐藏超出隐藏超出隐藏超出隐藏超出隐藏超出隐藏超出隐藏</div>
        </body>
    </html>

    输出结果:

    18.png

    (学习视频分享:css视频教程

    以上就是css3怎样设置超出的文本隐藏的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:css
    上一篇:css3怎样实现圆环旋转效果 下一篇:css3图片翻转特效代码是什么

    相关文章推荐

    • css3如何实现缩放动画效果• css3怎样实现不是直角的菱形效果• css怎样设置table的宽度为自适应宽度• css怎样清除左右浮动• css怎样让table去掉边距

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网