一般超出文本显示分为两种:单行超出文本和多行超出文本省略号显示,实现方式使用纯css实现:

 div { // 单行
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
 div { // 多行
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box; // 注意不是flex
-webkit-line-clamp:; // 指定行数
-webkit-box-orient: vertical; // box元素排列水平方式
}

css实现文本超出部分省略号显示的更多相关文章

  1. CSS控制文本超出指定宽度显示省略号和文本不换行

    一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加 */ width:31em;/* 何问起 hovertree.com */ word ...

  2. 【css】 文本超出2行显示省略号

    首先,要知道css的三条属性. overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; // ...

  3. css中文本超出部分省略号代替

    p{ width: 100px; //设置p标签宽度 white-space: nowrap; //文本超出P标签宽度不换行,而是溢出 overflow: hidden; //文本超出P标签,超出部分 ...

  4. CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行

    CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow {     display:block;/*内联对象需加*/     ...

  5. 不值一提,却又不得不提的“CSS文本超出部分省略号代替”

    偶然看到一篇类似css技巧与经验总结的文章,其中有一部分非常熟悉,那就是“css控制元素内文本超出部分使用省略号代替”,一般实际工作中, 很多产品经理会对页面UI有这样的要求.还记得,第一次做这个功能 ...

  6. CSS强制文本在一行内显示若有多余字符则使用省略号表示

    这篇文章主要介绍了强制文本在一行内显示,多余字符使用省略号,设置或检索是否使用一个省略标记(...)标示对象内文本的溢出.对应的脚本特性为textOverflow 设置或检索是否使用一个省略标记(.. ...

  7. CSS控制文本在一行内显示,若有多余字符则使用省略号表示

    强制文本在一行内显示,多余字符使用省略号 text-overflow: ellipsis; overflow: hidden; white-space: nowrap;

  8. CSS实现文本超过指定长度显示省略号

    <style type="text/css"> li { width:200px;/*宽度,超过即会溢出*/ line-height:25px;/*设置行间距*/ te ...

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

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

随机推荐

  1. [Java复习] 复习知识点

    将线程转换为守护线程可以通过调用Thread对象的setDaemon(true)方法来实现. String 被设计成不可变(immutable)类, 所以它的所有对象都是不可变对象. 要被序列化的实例 ...

  2. java中的Iterator和ListIterator的区别

    (一)iterator迭代器 Collection的iterator方法返回一个实现了一个Iterator接口的对象 Iterator接口中包含三个方法: 1)E next() 2)boolean h ...

  3. leetcode题解2. Add Two Numbers

    题目: You are given two non-empty linked lists representing two non-negative integers. The digits are ...

  4. 剑指Offer 30. 连续子数组的最大和 (数组)

    题目描述 HZ偶尔会拿些专业问题来忽悠那些非计算机专业的同学.今天测试组开完会后,他又发话了:在古老的一维模式识别中,常常需要计算连续子向量的最大和,当向量全为正数的时候,问题很好解决.但是,如果向量 ...

  5. lettuce行为驱动总结

    1.  pip install lettuce 在Python2.7下安装的 2.  py -3 –m pip install lettuce 在Python3下安装的 3.  执行:进到featur ...

  6. 大道至简第一章读后感JAVA伪代码形式

    观看了<大道至简>第一章后,从愚公移山的故事中可以发现愚公移山其实可以看作是一个一个项目,下面用JAVA伪代码形式编写: Import java(愚公移山) //愚公移山 public c ...

  7. 3.5 unittest生成测试报告HTMLTestRunner

    3.5 unittest生成测试报告HTMLTestRunner 前言批量执行完用例后,生成的测试报告是文本形式的,不够直观,为了更好的展示测试报告,最好是生成HTML格式的.unittest里面是不 ...

  8. python 进程之间的数据共享

    from multiprocessing import Process,Manager import os def f(d,n): d[os.getpid()] = os.getppid()#对字典d ...

  9. struts2 自定义异常拦截器配log4j

    log4j.rootLogger = debug,stdout,F log4j.appender.stdout = org.apache.log4j.ConsoleAppender log4j.app ...

  10. CSS 社区的解决方案,对比

    在众多解决方案中,没有绝对的优劣.还是要结合自己的场景来决定. 我们团队在使用过 scss 和 css modules 后,仍然又重新选择了使用 scss.css modules 虽然有效解决了样式冲 ...