html中把多余文字转化为省略号（单行文本）

最新推荐文章于 2023-10-18 15:20:25 发布

丁七岁

最新推荐文章于 2023-10-18 15:20:25 发布

阅读量3.6k

点赞数 2

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

本文链接：https://blog.csdn.net/qq_43612538/article/details/108568620

版权

HTML 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="ch">
    <head>
        <meta charset="UTF-8">
        <title>溢出的内容显示省略号</title>
        <style type="text/css">
            .b1{
                width: 200px;
                overflow:hidden;  /*内容会被修剪，并且其余内容是不可见的。*/
                text-overflow: ellipsis;  	/*显示省略符号来代表被修剪的文本*/
                white-space: nowrap;	/*文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。*/
            }
        </style>
    </head>
    <body>
        <div class="b1">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur doloremque, officiis? Eum facilis quod repudiandae sunt voluptate? Cum dignissimos, saepe. Architecto autem dicta quae quam quas rem sit voluptate. Dolores!
        </div>
    </body>
</html>

结果展示：

在这里插入图片描述
比如京东的这个就是：

在这里插入图片描述

丁七岁

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
html中把多余文字转化为省略号（单行文本）

<!DOCTYPE html><html lang="ch"> <head> <meta charset="UTF-8"> <title>溢出的内容显示省略号</title> <style type="text/css"> .b1{ width: 200px; overflow:h
复制链接

扫一扫

专栏目录