单行文字省略

很多时候不确定字数限制,但换行可能影响整体设计,这个时候常用就是文字省略加全文字提示了

.dom{
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

多行文字省略

.dom{
overflow: hidden;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
display: -webkit-box; }

CSS 实现单行及多行文字省略的更多相关文章

  1. CSS实现单行与多行文字省略(truncation)

    在上一篇文章小div布局之卡片堆叠(card-stacking)中有多行文字溢出省略的效果,这篇文章就对这种效果(包括单行文字溢出省略)的实现做个简单的记录,以防自己忘记.具体来说,就是要实现这种文字 ...

  2. jquery文字上下滚动--单行 批量多行 文字图片上下翻滚 | 多行滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 关于css实现单行、多行省略标记

    实现单行: overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 实现多行: display: -webkit-box; -we ...

  4. css实现单行(多行)文本溢出显示 ...

    overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 当然还需要加宽度width属来兼容部分浏览. 以上为单行文本溢出===== ...

  5. CSS文本单行或者多行超出区域省略号(...)显示方法

    单行超出时,主要用到几个CSS属性: 1.text-overflow : clip | ellipsis ; clip : 不显示省略标记(...),而是简单的裁切ellipsis : 当对象内文本溢 ...

  6. 【css】一行或者多行文字垂直水平居中

    1.方法一:使用css3弹性盒子(兼容IE10及以上浏览器,firefox,chrome,safari 5.1.7不支持) <!DOCTYPE html> <html> < ...

  7. Jquery : 上下滚动--单行 批量多行 文字图片翻屏【转】

    原文发布时间为:2010-02-01 -- 来源于本人的百度文章 [由搬家工具导入] 注:如果和左右滚动一起使用,则会出现冲突 一单行滚动(ad:http://www.gz138.com) <! ...

  8. css 之单行文本显示省略和多行文本省略

    一.单行文本显示省略号...... overflow:hidden; white-space:nowrap; text-overflow:ellipsis; <!DOCTYPE html> ...

  9. jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 洛谷P1541 乌龟棋 [2010NOIP提高组]

    P1541 乌龟棋 题目背景 小明过生日的时候,爸爸送给他一副乌龟棋当作礼物. 题目描述 乌龟棋的棋盘是一行N个格子,每个格子上一个分数(非负整数).棋盘第1格是唯一的起点,第N格是终点,游戏要求玩家 ...

  2. 【JZOJ3824】【NOIP2014模拟9.9】渴

    SLAF 世界干涸,Zyh认为这个世界的人们离不开水,于是身为神的他要将他掌控的仅仅两个水源地放置在某两个不同的城市.这个世界的城市因为荒芜,他们仅仅保留了必要的道路,也就是说对于任意两个城市有且仅有 ...

  3. 【JZOJ4804】【NOIP2016提高A组模拟9.28】成绩调研

    题目描述 输入 输出 样例输入 5 3 1 2 3 1 2 1 2 1 1 1 1 样例输出 4 数据范围 解法 考虑设置左指针l和右指针r: 维护[l,r]的关于等第的桶. 初始l=r=0: 每次右 ...

  4. 可变参数与foreach 的原理

    曾经写过c++11特性使用,但是这个究竟是什么呢,和其他语言的foreach语句十分相像 函数必须具有在编译时已知的单个返回类型;当编译器可以从上下文中找出它必须是什么时,auto只会使您不必输入它. ...

  5. nginx简介 (转)

    1.Nginx概述 2.Nginx安装与控制指令 3.Nginx如何工作 4.Nginx配置实例 4.1如何配置Linux下Nginx 4.1.1配置Nginx代理HTTP请求到Tomcat 4.1. ...

  6. 简单的requestAnimationFrame动画

    html部分 <div id="test" style="width:1px;height:17px;background:#0f0;">0%< ...

  7. 邀您共赴数据库学术顶会ICDE 2019——阿里云专场 零距离接触达摩院数据库“最强大脑”

    摘要: 当学术大家遇到技术大拿,会碰撞出怎样的火花?为进一步加深产学研学术交流,阿里云将于ICDE 2019大会期间(4月9日)举办以“云时代的数据库”为主题的技术专场(Workshop) 作为全球数 ...

  8. PHP Laravel系列之环境搭建( VirtualBox+Vagrant+Homestead+系列网址)

    搭建环境从来都是阻挡一门新技能的最致命的硬伤,为了这个环境,我又是花费了半天的时间,各种问题层出不穷,下面基于网上的一些教程(我看到的都多少有些问题) 开始的时候是在实验楼这个平台上开始学习的,不过 ...

  9. 1-1.go开发工具安装

    (1) (2) bin:go的可执行文件 src:go的源代码 (3)安装开发工具 安装:goland-2018.1.1.exe 将.jar文件复制到工具的bin目录下   用记事本打开“goland ...

  10. hdu5442 Favorite Donut 后缀数组 长春网赛

    wa从一点到晚上11点没停过,也不知道为什么错,第二天换了个思路做,终于过了.这题还是有点问题的,数据有点水,我看到有人贴的代码baabbaab这组数据是4 0,明显错的,但是却可以过. 下面的是我第 ...