Css 文字省略样式(单行/多行)

版权声明:本文为 wintersmilesb101 -(个人独立博客– http://wintersmilesb101.online 欢迎访问)博主转载文章,原文地址

效果图

image

上面的效果实现代码如下:

<!DOCTYPE html>  
<html>  

    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <style type="text/css">  
            .inaline {  
                overflow: hidden;  
                white-space: nowrap;  
                text-overflow: ellipsis;  
                /*clip  修剪文本。*/ 
            }  

            .intwoline {  
                display: -webkit-box !important;  
                overflow: hidden;  
                text-overflow: ellipsis;  
                word-break: break-all;  
                -webkit-box-orient: vertical;  
                -webkit-line-clamp: 3;  
            }  
        </style>  
    </head>  

    <body>  
        <p class="inaline">元素可提供相关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。 标签位于文档的头部,不包含任何内容。 标签的属性定义了与文档相关联的名称/值对。</p>  
        <p style="width: 500px;border: 1px solid red;" class="intwoline">元素可提供相关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。 标签位于文档的头部,不包含任何内容。 标签的属性定义了与文档相关联的名称/值对。元素可提供相关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。 标签位于文档的头部,不包含任何内容。 标签的属性定义了与文档相关联的名称/值对。元素可提供相关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。 标签位于文档的头部,不包含任何内容。 标签的属性定义了与文档相关联的名称/值对。元素可提供相关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。 标签位于文档的头部,不包含任何内容。 标签的属性定义了与文档相关联的名称/值对。元素可提供相关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。 标签位于文档的头部,不包含任何内容。 标签的属性定义了与文档相关联的名称/值对。元素可提供相关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。 标签位于文档的头部,不包含任何内容。 标签的属性定义了与文档相关联的名称/值对。</p>  
    </body>  
</html>

如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。

实现方法:
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
效果如图:

image

但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢。

接下来重点说一说多行文本溢出显示省略号,如下。
实现方法1:
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;
overflow:hidden;
效果如下:

image

适用范围:
因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端;
注:
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
display:-webkit-box;必须结合的属性,将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient必须结合的属性,设置或检索伸缩盒对象的子元素的排列方式。
实现方法2:
p{
    position:relative;
    line-height:20px;
    max-height:40px;
    overflow:hidden;}

p::after{
    content:"...";
    position:absolute;
    bottom:0;
    right:0;
    padding-left:40px;
    background:
    -webkit-linear-gradient(left,transparent,#fff55%);
    background:
    -o-linear-gradient(right,transparent,#fff55%);
    background:
    -moz-linear-gradient(right,transparent,#fff55%);
    background:
    linear-gradient(toright,transparent,#fff55%);
}
效果如下:

image

适用范围:
该方法适用范围广,但文字未超出行的情况下也会出现省略号,可结合js优化该方法。
注:

将height设置为line-height的整数倍,防止超出的文字露出。
给p::after添加渐变背景可避免文字只显示一半。
由于ie6-7不显示content内容,所以要添加标签兼容ie6-7(如:…);兼容ie8需要将::after替换成:after

imgae

文章点击进入详情:
已知显示两行CSS:
.intwoline {
                display: -webkit-box !important;
                overflow: hidden;
                text-overflow: ellipsis;
                word-break: break-all;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
            }
假设页面有3个:
<div class="color_lightBlack intwoline flag" style="border: 1px solid red;height: 40px;overflow: hidden;">  
<p class="font14" style="font-size:14px;text-indent:28px;color:#111111;font-family:"">  
1111掌众金融作为一家专注互联网消费金融的金融科技公司,掌众金融作为一家专注互联网消费金融的金融科技公司,掌众金融作为一家专注互联网消费金融的金融科技公司,掌众金融作为一家专注互联网消费金融的金融科技公司。  
</p>  
<p class="font14" style="font-size:14px;text-indent:28px;color:#111111;font-family:"">  
2222掌众金融作为一家专注互联网消费金融的金融科技公司,掌众金融作为一家专注互联网消费金融的金融科技公司,掌众金融作为一家专注互联网消费金融的金融科技公司,掌众金融作为一家专注互联网消费金融的金融科技公司。  
</p>  
</div>
添加 js
$(function() {
                $(".flag").each(function(i) {
                    var str = '';
                    str = $(".flag:eq(" + i + ")").text();
                    $(".flag:eq(" + i + ")").empty().text(str);
                })
            });

为什么不用js 截取字符串,–》不知道屏幕宽度!!!!!!!!!!!

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,既然您想了解如何实现单行多行文本溢出的省略,我将同时为您提供 CSS 和 JavaScript 两种方法。 ## CSS 实现 ### 单行文本溢出的省略 可以使用 CSS 的 `text-overflow` 属性来实现单行文本溢出的省略,代码如下: ```css .ellipsis { width: 150px; /* 元素宽度 */ white-space: nowrap; /* 强制在一行内显示 */ overflow: hidden; /* 隐藏溢出的部分 */ text-overflow: ellipsis; /* 显示省略号 */ } ``` 将需要进行省略的元素添加 `.ellipsis` 样式即可。 ### 多行文本溢出的省略 可以使用 CSS 的 `display`、`-webkit-box`、`-webkit-line-clamp` 和 `-webkit-box-orient` 属性来实现多行文本溢出的省略,代码如下: ```css .ellipsis { display: -webkit-box; /* 将元素设置为块级容器 */ -webkit-box-orient: vertical; /* 设置文本在垂直方向上排列 */ -webkit-line-clamp: 2; /* 设置最多显示两行文本 */ overflow: hidden; /* 隐藏溢出的部分 */ } ``` 将需要进行省略的元素添加 `.ellipsis` 样式即可。 需要注意的是,`-webkit-line-clamp` 是 WebKit 浏览器引擎私有属性,其他浏览器可能不支持。 ## JavaScript 实现 ### 单行文本溢出的省略 可以通过获取元素的宽度和文本的宽度,比较它们的大小来判断是否需要省略。代码如下: ```javascript function ellipsisText(selector) { const elements = document.querySelectorAll(selector); for (let i = 0; i < elements.length; i++) { const element = elements[i]; const style = window.getComputedStyle(element); const elementWidth = element.clientWidth; const textWidth = element.scrollWidth; const ellipsis = '...'; if (textWidth > elementWidth) { const text = element.textContent; const textLength = text.length; let i = textLength; while (i > 0 && (textWidth + ellipsis.length) > elementWidth) { i--; element.textContent = text.slice(0, i); textWidth = element.scrollWidth; } element.textContent = element.textContent + ellipsis; } } } ``` 这里的 `selector` 是需要进行省略的元素的选择器。将需要进行省略的元素传入该函数即可。 ### 多行文本溢出的省略 使用 JavaScript 实现多行文本溢出的省略比较麻烦,需要先获取元素的行高,再计算需要显示的行数,最后根据行数和文本内容进行裁剪和添加省略号。代码如下: ```javascript function ellipsisText(selector, lineCount) { const elements = document.querySelectorAll(selector); for (let i = 0; i < elements.length; i++) { const element = elements[i]; const lineHeight = parseInt(window.getComputedStyle(element).lineHeight, 10); const height = lineHeight * lineCount; const text = element.textContent; const textLength = text.length; let i = textLength; while (element.clientHeight > height && i > 0) { i--; element.textContent = text.slice(0, i); } if (i < textLength) { element.textContent = element.textContent.slice(0, i - 3) + '...'; } } } ``` 这里的 `selector` 是需要进行省略的元素的选择器,`lineCount` 是需要显示的行数。将需要进行省略的元素和行数传入该函数即可。 需要注意的是,该方法只适用于行高固定的情况下,如果行高不固定,最好还是使用 CSS 来实现。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值