多行文本溢出显示省略号(…)全攻略

最新推荐文章于 2021-07-05 16:39:22 发布

joyhen

最新推荐文章于 2021-07-05 16:39:22 发布

阅读量7k

点赞数

分类专栏： Javascript JQuery插件文章标签：多行文本溢出

Javascript 同时被 2 个专栏收录

65 篇文章 1 订阅

订阅专栏

JQuery插件

15 篇文章 0 订阅

订阅专栏

原文：http://www.css88.com/archives/5206

这里介绍一下2个js库 Clamp.js和jQuery.dotdotdot，它们非常不错哦。

Clamp.js地址：https://github.com/josephschmitt/Clamp.js 2.475 kb(压缩库)

jQuery.dotdotdot地址：https://github.com/BeSite/jQuery.dotdotdot 6.15kb(压缩库)

A jQuery plugin for advanced cross-browser ellipsis on multiple line content.
Demo's and documentation: http://dotdotdot.frebsite.nl

How to use the plugin

Include all nessesary .js-files inside the head-tag of the page.

<head>
    <script src="jquery.js" type="text/javascript"></script>
    <script src="jquery.dotdotdot.js" type="text/javascript"></script>
</head>

Create a DOM element and put some text and other HTML markup in this "wrapper".

<div id="wrapper">
    <p>Lorem Ipsum is simply dummy text.</p>
</div>

Fire the plugin onDocumentReady using the wrapper-selector.

$(document).ready(function() {
    $("#wrapper").dotdotdot({
        // configuration goes here
    });
});

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

joyhen

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

CSS实现单行、多行文本溢出显示省略号（…）

07-26

CSS实现单行、多行文本溢出显示省略号（…）示例文档，自行下载查看

移动端的text-overflow多行文本溢出显示省略号(…)

12-10

在移动端，`text-overflow: ellipsis` 属性常用于单行文本溢出时显示省略号，但其本身并不支持多行文本的处理。本文将探讨如何在不同场景下实现多行文本溢出显示省略号的效果。首先，对于基于WebKit的浏览器（如...

参与评论您还未登录，请先登录后发表或查看评论

多行文本溢出显示省略号(…)

SailingCoder的博客

07-05

6567

多行展示以省略号(…)处理在开发过程中会出现大量文字展示情况，一般都会做超过几行，剩余部分按照省略号展示。单行展示 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 多行展示 WebKit浏览器或移动端（绝大部分是WebKit内核的浏览器）方可使用，有很大的兼容问题 overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line

用JS解决多行溢出文本的省略问题

weixin_34161064的博客

05-01

810

前言在项目开发过程中，经常会遇到溢出文本的省略问题。根据需求，可以把文本省略分为单行文本省略和多行文本省略两类。单行文本的省略，现在css样式 text-overflow 已经有兼容性很好的样式支持了。但是多行文本，目前支持webkit内核的css样式 -webkit-line-clamp 可以做到，但它针对火狐浏览器就行不通了。这就是本文要解决的问题。 css解决方案（可跳...

css多行文本溢出显示省略号及延伸

arthur的博客

05-15

7240

前言如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。overflow: hidden; text-overflow:ellipsis; white-space: nowrap;但是这个属性只支持单行文本的溢出显示省略号，如果我们要实现多行文本溢出显示省略号呢。实现方式如下：display: -web

多行文字结尾显示省略号

weixin_30628077的博客

04-13

175

由于本人是新手，许多东西对于我来说，都是挑战，特开通博客园来记载分享项目中遇到的各种问题，其中很多资料都是借鉴别人的，谢谢各位大神！最近的项目主要依托于谷歌内核的一个早期版本，对于CSS3中的linear-gradient都不能支持，太纠结！下面开始分享第一个问题，多行文字结尾显示省略号 首先项目中应用的解决方案：对于单行文字显示省略号 text-overflow: cli...

多行文本溢出显示省略号

06-15

多行文本溢出显示省略号

CSS实现单行、多行文本溢出显示省略号的实现方法

09-22

在CSS中，实现文本溢出时显示省略号的方法分为单行文本溢出和多行文本溢出两种情况。这两种效果可以有效地处理页面内容超出预设区域时的显示问题，增强用户界面的整洁性。一、单行文本溢出显示省略号 对于单行...

BInyLU#blognews#CSS实现单行、多行文本溢出显示省略号（…）1

07-25

实现方法：效果如图：但是这个属性只支持单行文本的溢出显示省略号，如果我们要实现多行文本溢出显示省略号呢。实现方法：效果如图：适用范围：该方法适用范围广，但文字未

mlellipsis.js-实现多行文字溢出隐藏显示省略号

923723914

10-12

234

超出容器部分文字做省略，这是基本写前端代码都会遇到的问题。某些位置为了表现完美不额外加滚动条，都会要求多出的部分作省略，例如文章简介”今天天气真的好…”，文本之后部分点击进入详情页才能看到，超出多余的用”…”省略。然而，一般这些简介都是用后台语言去作处理，例如只显示前140字等，如何用前端代码实现？你会想到用css的overflow:hidden;white-space:nowra...

4种方法实现单行、多行——文本溢出显示省略号

weixin_30355437的博客

01-12

3617

一、单行溢出在前端基础，单行文本的溢出显示省略号，这种做法我们通常用text-overflow来实现，然后给元素定宽，超出隐藏，具体如下面一段代码：显示效果：二、那么多行文本溢出呢？具体代码如下：显示效果：说明：1、该方法不支持ff，主要是-webkit-line-clamp这一属性不是标注的一部分，可能是webkit内部使用的，或者被弃用的。根据存在即合理的原则，也被很多人发现，不妨试...

多行溢出省略号显示（ccs/js）实现！

weixin_47679798的博客

01-11

4091

关于多行溢出显示省略号的问题，如果是根据字符的长度个数限制超过部分替换为省略号，这种还是很好处理的，关键是根据行数，在未知情况下你不知道需要多少内容，去填满一个元素，做起来还是比较麻烦的，网上很多种乱七八糟的方案，拿过来又不能直接用，，我就结合网上的思路重新整理修改一波可以直接用的几种方案。一、单行溢出出现省略号显示： <div class="p">张艺兴张艺兴张艺兴张艺兴张艺兴</div> 样式： .p{ width:1rem; overflow:hidden;//超出部分

css3 多行文本溢出 省略号

最新发布

08-23

要实现CSS多行文本溢出显示省略号的效果，可以使用以下方法： 1. 首先，需要设置容器的固定宽度和高度，例如通过设置`.wrap`的`width`和`height`属性来确定容器的大小。 2. 然后，需要对文本内容的容器设置一些样式，例如`.content`类。可以使用`overflow: hidden;`来隐藏超出容器尺寸的内容。使用`text-overflow: ellipsis;`来在文本溢出时显示省略号。 3. 如果想要显示多行文本并且超出部分显示省略号，可以使用`-webkit-line-clamp`属性来设置行数。例如，可以使用`-webkit-line-clamp: 3;`来限制显示文本的行数为3行。但是请注意，这个属性只在WebKit浏览器中生效，其他浏览器可能需要添加一些兼容性样式。 4. 最后，你可以通过设置`display: -webkit-box;`和`-webkit-box-orient: vertical;`来使文本在多行情况下垂直排列。示例代码如下： ``` <div class="wrap"> <div class="content"> 测试数据：css多行文本溢出显示省略号，多行文本溢出显示省略号--明天也要努力 </div> </div> <style> .wrap { width: 200px; height: 300px; } .content { width: 100%; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; } </style> ``` 以上代码将在一个宽度为200px，高度为300px的容器中显示多行文本。超出3行的部分将被隐藏，并以省略号"..."显示。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [CSS中设置( 单行、多行 )超出显示省略号](https://blog.csdn.net/ZYS10000/article/details/127607497)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [CSS实现单行、多行文本溢出显示省略号（…）](https://blog.csdn.net/qq_43000315/article/details/125313649)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]