• 技术文章 >web前端 >前端问答

    html怎么设置超出部分不显示

    藏色散人藏色散人2021-09-13 14:57:57原创115

    html设置超出部分不显示的方法:1、通过设置“width:10em;”保证文字不会被半汉字截断;2、通过设置“overflow: hidden;”使超出长度的文字隐藏;3、通过“text-overflow:ellipsis;”设置省略号。

    本文操作环境:windows7系统、HTML5&&CSS3版、Dell G3电脑。

    html怎么设置超出部分不显示?

    HTML设置超出部分隐藏

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div{
                width: 10em; /*保证文字不会被半汉字截断,显示10个文字*/
                overflow: hidden; /*超出长度的文字隐藏*/
                text-overflow:ellipsis;/*文字隐藏以后添加省略号*/
                white-space: nowrap; /*强制不换行*/
            }
        </style>
    </head>
    <body>
        <div>
            文字超出了需要隐藏并显示省略号这个在工作中很多时候都要用到,我想很多人都碰到过吧,这个有两种解决方法
        </div>
    </body>
    </html>
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div{
                width: 10em; /*保证文字不会被半汉字截断,显示10个文字*/
                overflow: hidden;
                /*出现省略号*/
                text-overflow: ellipsis;
                /*是在第几行*/
                -webkit-line-clamp: 2;
                display: -webkit-box;
                -webkit-box-orient: vertical;
            }
        </style>
    </head>
    <body>
        <div>
            文字超出了需要隐藏并显示省略号这个在工作中很多时候都要用到,我想很多人都碰到过吧,这个有两种解决方法
        </div>
    </body>
    </html>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div{
                width: 10em; /*保证文字不会被半汉字截断,显示10个文字*/
    overflow: hidden; /*超出长度的文字隐藏*/
    text-overflow:ellipsis;/*文字隐藏以后添加省略号*/
    white-space: nowrap; /*强制不换行*/
    }
        </style>
    </head>
    <body>
        <div>
            文字超出了需要隐藏并显示省略号这个在工作中很多时候都要用到,我想很多人都碰到过吧,这个有两种解决方法
    </div>
    </body>
    </html>

    推荐学习:《css视频教程

    以上就是html怎么设置超出部分不显示的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:html
    上一篇:html代码怎么注释掉 下一篇:微信小程序是html5吗
    线上培训班

    相关文章推荐

    • html/css怎么设置背景图片居中• html和body标签的区别有哪些• html怎么设置首行缩进2字符• html代码怎么注释掉

    全部评论我要评论

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

    PHP中文网