一般超出文本显示分为两种:单行超出文本和多行超出文本省略号显示,实现方式使用纯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. canvas画圆类似于锯齿指针 angular5

    拿到图的时候大致是这样的,里面的圆是有动态效果的,考虑到gif图耗资源,于是想要用canvas画出来: 仔细看图不难发现,这个锯齿圆类似于表盘,计算好弧度,不难实现: 因为项目现在用的框架是angul ...

  2. OneStopEnglish corpus: A new corpus for automatic readability assessment and text simplification-paper

    这篇论文的related work非常详尽地介绍了各种readability的语料 abstract这个paper描述了onestopengilish这个三个level的文本语料的收集和整理,阐述了再 ...

  3. JUnit4测试报错:class not found XXX

     初学java框架,最近用eclipse跟着视频坐淘淘商城这个项目,其中使用了JUnit4做单元测试.当运行测试代码时,项目报错:class not found xxx. 借助了其他大神的博客,论坛等 ...

  4. 软件工程 week 02

    一.地址链接 1.作业地址:https://edu.cnblogs.com/campus/nenu/2016CS/homework/2110 2.git仓库地址:https://git.coding. ...

  5. cordova文件传输系统插件使用:cordova-plugin-file-transfer

    1. 添加插件:cordova plugin add cordova-plugin-file-transfer 2. 调用方法: var fileTransfer = new FileTransfer ...

  6. s2第六章继承和多态

    public class Employee { //年龄 public int Age { get; set; } //性别 public Gender Gender { get; set; } // ...

  7. Android 异步下载

    package com.example.demo1; import java.io.File; import java.io.FileOutputStream; import java.io.IOEx ...

  8. oracle-logminer

    LogMiner工具实际上是由两个新的PL/SQL内建包((DBMS_LOGMNR 和 DBMS_ LOGMNR_D)和四个V$动态性能视图(视图是在利用过程DBMS_LOGMNR.START_LOG ...

  9. python(二)——list、字典、字符串操作

    列表——list 假设一种场景,想要存班里所有同学的名字,那应该拿什么存呢? 我们可以拿一个字符串去存,例如: stus = "s1,s2,s3,s4,s5……sn" 那我们要从里 ...

  10. 第三章 jQuery总结 参考文本

    jQuery jQuery是javascript的一个函数库,非常方便,非常主流 利用jQuery开发步骤: 1导入jQuery库 2在$(function(){})的{}中编写jQuery代码 ①j ...