说明

(1)原文:http://css-tricks.com/line-clampin/

(2)非直译

需求: 当文字长度超过N行时,文字后面自动用省略号补齐。

比如,你有如下的HTML代码:

<div class="module">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>

但是呢,你想看到下面的效果:

那怎么办呢?

方法一:webkit 的flexbox方法

.module{
width: 250px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp:;
-webkit-box-orient: vertical;
}

一方面这种方法确实得到了我们想要的效果,另一方面,又觉得这种方法比较hack, 必须使用flexbox的东西。

方法二:利用淡出的效果来曲线救国

.module{
position: relative;
height: 3.6em; /* 准确的N行文字的高度 */
} .module:after {
content: "";
text-align: right;
position: absolute;
bottom:;
right:;
width: 70%;
height: 1.2em;
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}

这种方法得到的不是三个省略号的效果,而是

另外: Opera的方式

.module {
height: 3.6em; /* 准确的n行代码的高度*/
text-overflow: -o-ellipsis-lastline;
}

任何CSS的实现,都有JS来呼应

Clamp.js的方法

// https://github.com/josephschmitt/Clamp.js
var module = document.getElementById("clampjs");
$clamp(module, {clamp: 3});

更优美的解决方法:http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/

[译]line clampin让文字在指定的行数内省略号显示的更多相关文章

  1. 删除log文件末尾中指定的行数

    /// <summary>        /// 删除log文件末尾中指定的行数        /// </summary>        /// <param name ...

  2. 获取指定开始行数$start,跨度$limit的文件内容

    // 获取指定开始行数$page,跨度$step的文件内容 function getLine($file_name, $start, $limit) { $f = new SplFileObject( ...

  3. 用 python 修改文件中指定的行数

    #! /bin/python filename='setup.ini' lines=[] with open(filename,'r') as f: lines=f.readlines() lines ...

  4. .Net_用控制台程序打印指定行数的三角型(面试题)

    .Net_用控制台程序打印指定行数的三角型(面试题)   下面是一个由*号组成的4行倒三角形图案.要求: 1.输入倒三角形的行数,行数的取值3-21之间,对于非法的行数,要求抛出提示“非法行数!”: ...

  5. 获取指定<文字行数>的<高度>是多少 TextKit

    - (CGSize)maxLineSizeWithLines:(NSInteger)lines constraintSize:(CGSize)size attributes:(NSDictionary ...

  6. SHIFT(文字列の指定位置数の移動)

    文字ごとの項目内容の移動 以下のような SHIFT 命令のバリアントを使用すると.項目内容を移動することができます.SHIFT を使用すると.文字ごとに項目内容が移動します. 文字列の指定位置数の移動 ...

  7. 完美解决 向UILable 文字最后插入N张图片,支持向限制行数的UILable 最后一行插入,多余文字显示...

    效果: ====直接上代码吧=== // // UILabel+StringFrame.h // QYER // // Created by qyer on 15/3/19. // Copyright ...

  8. iOS中求出label中文字的行数和每一行的内容

    今天遇到一个需求,需要计算label中文字的行数.想了好久也没想到好的解决方法,就在网上找了下.结果发现一篇文章是讲这个的.这部分代码不但能够求出一个label中文字行数,更厉害的是能够求出每一行的内 ...

  9. python 脚本(获取指定文件夹、指定文件格式、的代码行数、注释行数)

    1.代码的运行结果: 获取 指定文件夹下.指定文件格式 文件的: 总代码行数.总注释行数(需指定注释格式).总空行数: #coding: utf-8 import os, re # 代码所在目录 FI ...

随机推荐

  1. [工作中的设计模式]观察者模式observer

    一.模式解析 观察者模式定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象.这个主题对象在状态上发生变化时,会通知所有观察者对象,使它们能够自动更新自己. 观察者模式又叫订阅发布模式, ...

  2. 点击 Run 之后发生了什么?

    这是我以前去链家网面试的一个题目,当时回答不够全面,现在看了2016 WWDC以及Sunnyxx iDev大会的分享之后,感觉对这个问题有了一些简单的认识,就来总结下.如果大家有补充,麻烦评论下哦! ...

  3. 并查集(图论) LA 3644 X-Plosives

    题目传送门 题意:训练指南P191 分析:本题特殊,n个物品,n种元素则会爆炸,可以转移到图论里的n个点,连一条边表示u,v元素放在一起,如果不出现环,一定是n点,n-1条边,所以如果两个元素在同一个 ...

  4. Git分支操作

    1.创建分支 git branch <分支名> 2.切换分支 git checkout <分支名> 该语句和上一个语句可以和起来用一个语句表示: git checkout -b ...

  5. HTML5中lineCap端点样式遇到closePath()

    定义和用法 lineCap 属性设置或返回线条末端线帽的样式. 注释:"round" 和 "square" 会使线条略微变长. 默认值: butt JavaSc ...

  6. HTML入门第一天

    http:超文本标记语言,主要用途是开发网页,使用http展现文字图片 视频 声音 表格 链接……是web网站开发的基础 www(万维网/因特网):world wide web w3c是制定web标准 ...

  7. 解决嵌入WinForm的WPF控件无法显示图片问题

    解决办法是在控件初始化时,通过下面方法再次加载图片: ucCanvas.CreateCoordinateImage.Source = GetImageIcon(global::MainApplicat ...

  8. 2076. The Drunk Jailer

    Problem A certain prison contains a long hall of n cells, each right next to each other. Each cell h ...

  9. 4分钟了解nano编辑器和简单命令 2015.10.6

    nano感觉并不常用,但是偶尔遇到过几次. nano命令是一个类似VI的编辑器,但是更简单,其中的i,a等命令似乎可以用,但是有些命令不可以用.保存和退出最大的区别在于退出方式,如果你要保存所做的修改 ...

  10. 【BZOJ】2956: 模积和

    题意 求\(\sum_{i=1}^{n} \sum_{j=1}^{m} (n \ mod \ i)(m \ mod \ j)[i \neq j] \ mod \ 19940417\), \((n, m ...