html溢出的文字省略号显示

最新推荐文章于 2024-04-13 16:49:16 发布

丨小小风离丨

最新推荐文章于 2024-04-13 16:49:16 发布

阅读量253

点赞数

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

本文链接：https://blog.csdn.net/qq_27185691/article/details/106638371

版权

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

单行文本溢出显示省略号

单行文本 需要满足三个条件。

先强制一行内显示文本：white-space: nowrap; （默认 normal 自动换行）
超出的部分隐藏：overflow: hidden;
文字用省略号替代超出的部分：text-overflow: ellipsis;

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            margin: 100px auto;
            width: 80px;
            height: 80px;
            background-color: skyblue;
            /* white-space: normal; 自动换行*/
            white-space: nowrap;    /*不允许换行显示*/
            overflow: hidden;       /*溢出部分隐藏*/
            text-overflow: ellipsis;/*溢出部分隐藏*/
        }
    </style>
    
</head>
    
<body >
    <div>
        这里我要一行文字显示可不可以
    </div>
</body>

</html>

多行文本溢出显示省略号

存在较大的兼容性问题，一般谷歌和火狐等浏览器支持，IE不支持

注意调整容器的高度，让它只包谷你要显示的行的高度

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            margin: 100px auto;
            width: 80px;
            height: 80px;
            background-color: skyblue;
            overflow: hidden;
            text-overflow: ellipsis;
            /* 弹性伸缩盒子模型显示 */
            display: -webkit-box;
            /* 限制在一个块元素显示的文本的行数 */
            -webkit-line-clamp: 2;
            /* 设置或检索伸缩盒对象的子元素的排列方式 */
            -webkit-box-orient: vertical;
        }
    </style>
</head>
<body>
    <div>
        这里我要两行文字显示可不可以
    </div>
</body>
</html>