2020-12-01

最新推荐文章于 2024-09-03 09:07:03 发布

Zikx_09

最新推荐文章于 2024-09-03 09:07:03 发布

阅读量84

点赞数

分类专栏：笔记文章标签： html css html5 chrome

本文链接：https://blog.csdn.net/Zikx_09/article/details/110452357

版权

笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

文本溢出处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
/*单行溢出*/
        .one-line {
            width: 300px;
            height: 30px;
            line-height: 30px;
            border:1px solid #000;
            /* 文本强制一行显示 */
            white-space: nowrap;
            /* 溢出处理 */
            overflow: hidden;
            /* 文本溢出处理   ellipsis省略号*/
            text-overflow: ellipsis;
        }
/*多行溢出方法一*/
        .many-line1 {
            /* 3行 */
            width:300px;
            border:1px solid #000;
            /* 固定写法 webkit内核独有 */

            /* 一个盒子显示3行 */
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;

            /* 盒子溢出处理 */
            overflow: hidden;
            /* 需要显示省略号 */
            text-overflow: ellipsis;

     
        }
/*多行溢出方法二伪元素模拟...,效果比较好*/
        .many-line2 {
            position: relative;
            width:300px;
            border:1px solid #000;
            /* 显示2行 */
            height: 60px;
            line-height: 30px;
            overflow: hidden;

        }
         .many-line2::after {
             content: '...';
             position: absolute;
             right: 0;
             bottom: 0;
             padding-right: 8px;
         } 
    </style>
</head>
<body>
    <h1>单行溢出显示省略号</h1>
    <p class="one-line">
        CSDN是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区.
    </p>
    <h1>多行溢出显示省略号</h1>
    <h4>方法1：</h4>
     <p class="many-line1">
        CSDN是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区.
CSDN是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区.
     </p>

    <h4>方法2：</h4>
    <p class="many-line2">
       CSDN是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区.CSDN是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区.CSDN是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区.
     </p>

</body>
</html>

Zikx_09

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2020-12-01

文本溢出处理<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>/*单行溢出*/ ..
复制链接

扫一扫