html怎么设置超出部分不显示-前端问答-PHP中文网

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

藏色散人

发布： 2021-09-13 14:57:57

原创

7455人浏览过

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

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

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

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

HTML设置超出部分隐藏

影缘版商城

率先引入语言包机制，可在1小时内制作出任何语言版本，程序所有应用文字皆引自LANG目录下的语言包文件，独特的套图更换功能，三级物品分类，购物车帖心设计，在国内率先将购物车与商品显示页面完美结合，完善的商品管理，具备上架、下架缺货及特价商品设置功能多多，商城名、消费税、最低购物金额、货币符号、商城货币名称全部后台设定，多级用户考虑，管理员只需要设置用户级别、不同级别用户之返点系统自动判断用户应得返还

查看详情

<!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中文网其它相关文章！