实现单行:

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap; 实现多行:
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden; -webkit-line-clamp文本显示行数;
需要结合一下属性进行使用:
  display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
  -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。
												

关于css实现单行、多行省略标记的更多相关文章

  1. CSS 文本溢出时显示省略标记

    如标题所示... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.o ...

  2. css文字单行/多行超出显示省略号...

    css文字单行/多行超出显示省略号... 项目里写css样式我们经常会遇到将文字超出显示省略号的情况,记录一下以后能用到. 单行超出 .oneline { width:300upx; /*宽度一定要设 ...

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

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

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

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

  5. css多行省略和单行省略

    实现文本省略: <!-- html代码 --> <p class="single">该文的主题思想即对自由境界的向往.朱自清当时虽置身在污浊黑暗的旧中国,但 ...

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

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

  7. css多行省略

    单行省略就不用说了,用css实现非常简单,兼容性还非常好.但是多行省略一直都是前端的痛点,在css3之前,可以用js去算两行能放多少个字,把多余的字用 ... 代替,且不说好不好,万一哪天PM说要改成 ...

  8. 谈谈一些有趣的CSS题目-- 单行居中,两行居左,超过两行省略

    开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...

  9. 纯 CSS 自定义多行省略:从原理到实现

    文字溢出怎么展示,你的需求是什么?单行还是多行?截断,省略,自定义样式,自适应高度?在这里你都能找到答案.接下来我会由浅入深,从原理到实现,带你一步步揭开多行省略的面纱.我们先从最简单的单行溢出省略开 ...

随机推荐

  1. web flash推流h264视频取消cbr

    flash as3.0 推视频H264关于视频质量 初次设置代码如下: h264Setting.setProfileLevel(H264Profile.BASELINE, H264Level.LEVE ...

  2. 谁能赢呢? BZOJ 2463

    题目描述 小明和小红经常玩一个博弈游戏.给定一个n×n的棋盘,一个石头被放在棋盘的左上角.他们轮流移动石头.每一回合,选手只能把石头向上,下,左,右四个方向移动一格,并且要求移动到的格子之前不能被访问 ...

  3. python编程技巧

  4. [Unity3D]Unity3D游戏开发之怪物AI

    大家好.欢迎大家关注由我为大家带来的Unity3D游戏开发系列文章,我的博客地址为:http://blog.csdn.net/qinyuanpei.        在上一篇文章中,我们基本上实现了一个 ...

  5. angularJs条件查询:

    首先需要建立一个输入框进行数据绑定: <div class="box-tools pull-right"> <div class="has-feedba ...

  6. java 常用操作(保留小数位数、int转string,string转int)

    1.保留2位小数 //similarityTemp为double类型,需要保留2位有效数据,利用String.format String strTemp=String.format("%.2 ...

  7. ubuntu中误删/var/lib/dpkg/info的补救方法

    今晚在ubuntu上安装一个软件时,出现这样的错误提示:E: Sub-process /usr/bin/dpkg returned an error code (1)然后在网上找了查找问题原因及解决方 ...

  8. 轻量级RPC框架-motan

    https://github.com/weibocom/motan/wiki/zh_quickstart#%E7%AE%80%E5%8D%95%E8%B0%83%E7%94%A8%E7%A4%BA%E ...

  9. 1.1 Go安装与项目结构初始化

    软件安装安装包下载地址为:https://golang.org/dl/ 如果打不开可以: https://golang.google.cn/dl/ https://dl.google.com/go/g ...

  10. 用NaviCat创建存储过程批量添加测试数据

    打开navicat连接上数据库,然后打开左上角函数,新建一个函数. BEGIN DECLARE i int; --声明变量 DECLARE groupid int; set i=LAST_INSERT ...