一般超出文本显示分为两种:单行超出文本和多行超出文本省略号显示,实现方式使用纯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. Selenium·自动化基础

    date:2018505+2018506 day05+06mor 一.安装环境 1.cmd→pip install selenium 2.将浏览器驱动放入X:\Python27下(如chromedri ...

  2. 解决使用angular2路由后,页面刷新后报404错误。

    点击路由链接跳转页面是正常的,但是当刷新页面时就出现了404错误. 解决方法如下: 在app.module.ts中添加import: import {HashLocationStrategy,Loca ...

  3. 《DSP using MATLAB》Problem 7.12

    阻带衰减50dB,我们选Hamming窗 代码: %% ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ...

  4. PythonStudy——Python 内置函数 Built-in function

    内置方法:Python中声明每一个类系统都会加上一些默认内置方法,提供给系统调用该类的对象时使用.比如需要实例化一个对象时,需要调用该类的init方法:使用print去打印一个类时,其实调用的是str ...

  5. 二、Ansible中playbook的变量

    先看看debug模块的使用: msg:输出调试信息 var:将某个任务执行的输出作为变量传给debug模块,debug模块将其打印输出 verbosity:debug的任务级别   1:在playbo ...

  6. laravel的filter()方法的使用 (方法使用给定的回调函数过滤集合的内容,只留下那些通过给定真实测试的内容)

    filter 方法使用给定的回调函数过滤集合的内容,只留下那些通过给定真实测试的内容: $collection = collect([1, 2, 3, 4]); $filtered = $collec ...

  7. 如何在idea中引入一个新maven项目

    如何在idea中引入一个新的maven项目,请参见如下操作:      

  8. Eclipse+PyDev 安装和配置

    Eclipse+PyDev 安装和配置 2012-03-17 23:23:23 | 17465次阅读 | 评论:0 条 |  Python开发有很多工具,其中Eclipse+Pydev 是最常见的一种 ...

  9. Unix/Linux进程间通信

    一,Linux下进程间通信的几种主要手段简介: 1,管道(Pipe)及有名管道(named pipe) 管道可用于具有亲缘关系进程间的通信 有名管道克服了管道没有名字的限制,因此,除具有管道所具有的功 ...

  10. 【疑难杂症】gdb调试多线程程序报错:interrupted system call

    一. cmake生成可调试版本的程序,该内容参考自https://www.linuxidc.com/Linux/2014-03/98622.htm 具体内容如下: 1, 使用CMAKE编译确实很方便. ...