文本溢出省略

 

单行文本溢出

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            border: 1px solid black;
            line-height: 20px;
            width: 200px;
            height: 20px;
            white-space: nowrap; /*设置该属性使文本在一行内显示，不自动换行*/
        }
    </style>
</head>
<body>
<p>这是一些文本这是一些文本这是一些文本这是一些文本</p>
</body>
</html>
复制代码

效果如下：

 

 解决方法

复制代码
p{
            border: 1px solid black;
            line-height: 20px;
            width: 200px;
            height: 20px;
            white-space: nowrap;
            overflow: hidden; /*文本溢出时隐藏超出的内容*/
            text-overflow: ellipsis;  /*文本溢出时显示省略号来替代被修剪的文本*/
}
复制代码

效果如下：

多行文本溢出

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            border: 1px solid black ;
            line-height: 20px;  /*行高可以控制容器内可容纳的文本行数*/
            height: 40px;
        }
    </style>
</head>
<body>

<p class="demo">
    这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本
    这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本
    这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本
    这是一些文本这是一些文本这是一些文本这是一些文本这是一些文本
</p>
</body>
</html>
复制代码

效果如下：

方法1：使用定位元素

　　使用伪元素::after为<p>元素末尾添加一个省略号，并将该省略号声明为绝对定位元素，始终位于容器的右下角。

复制代码
p {
            border: 1px solid black ;
            position: relative; /*不要忘了将容器声明为定位元素，使其成为省略号的容纳块*/
            line-height: 20px;
            height: 40px;
            overflow: hidden;
}
p::after {
            content:"...";
            font-weight:bold;
            position:absolute;
            bottom:0;
            right:0;
            padding:0 20px 1px 45px;

            /* 为了展示效果更好 */
            background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
            background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
            background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
            background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
            background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
}
复制代码

效果如下：

 缺点：

  • 即使文本没有溢出了，省略号也始终存在；

 

 方法2：使用-webkit-line-clamp属性

p {
            border: 1px solid black ;
            height: 40px;
            display: -webkit-box;
            overflow: hidden;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
}

优点：

  • 文本溢出是显示省略号，没溢出时不显示；

缺点：

  • 兼容性差，只能在webkit内核的浏览器中使用，多用于移动端页面；
posted @   ˙鲨鱼辣椒ゝ  阅读(27)  评论(0)  编辑  收藏  举报
编辑推荐：
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· 写一个简单的SQL生成工具
· AI 智能体引爆开源社区「GitHub 热点速览」
· C#/.NET/.NET Core技术前沿周刊 | 第 29 期（2025年3.1-3.9）
点击右上角即可分享
微信分享提示