css实现文本超出部分省略号显示
一般超出文本显示分为两种:单行超出文本和多行超出文本省略号显示,实现方式使用纯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实现文本超出部分省略号显示的更多相关文章
- CSS控制文本超出指定宽度显示省略号和文本不换行
一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加 */ width:31em;/* 何问起 hovertree.com */ word ...
- 【css】 文本超出2行显示省略号
首先,要知道css的三条属性. overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; // ...
- css中文本超出部分省略号代替
p{ width: 100px; //设置p标签宽度 white-space: nowrap; //文本超出P标签宽度不换行,而是溢出 overflow: hidden; //文本超出P标签,超出部分 ...
- CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行
CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加*/ ...
- 不值一提,却又不得不提的“CSS文本超出部分省略号代替”
偶然看到一篇类似css技巧与经验总结的文章,其中有一部分非常熟悉,那就是“css控制元素内文本超出部分使用省略号代替”,一般实际工作中, 很多产品经理会对页面UI有这样的要求.还记得,第一次做这个功能 ...
- CSS强制文本在一行内显示若有多余字符则使用省略号表示
这篇文章主要介绍了强制文本在一行内显示,多余字符使用省略号,设置或检索是否使用一个省略标记(...)标示对象内文本的溢出.对应的脚本特性为textOverflow 设置或检索是否使用一个省略标记(.. ...
- CSS控制文本在一行内显示,若有多余字符则使用省略号表示
强制文本在一行内显示,多余字符使用省略号 text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
- CSS实现文本超过指定长度显示省略号
<style type="text/css"> li { width:200px;/*宽度,超过即会溢出*/ line-height:25px;/*设置行间距*/ te ...
- CSS文本单行或者多行超出区域省略号(...)显示方法
单行超出时,主要用到几个CSS属性: 1.text-overflow : clip | ellipsis ; clip : 不显示省略标记(...),而是简单的裁切ellipsis : 当对象内文本溢 ...
随机推荐
- Selenium·自动化基础
date:2018505+2018506 day05+06mor 一.安装环境 1.cmd→pip install selenium 2.将浏览器驱动放入X:\Python27下(如chromedri ...
- 解决使用angular2路由后,页面刷新后报404错误。
点击路由链接跳转页面是正常的,但是当刷新页面时就出现了404错误. 解决方法如下: 在app.module.ts中添加import: import {HashLocationStrategy,Loca ...
- 《DSP using MATLAB》Problem 7.12
阻带衰减50dB,我们选Hamming窗 代码: %% ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ...
- PythonStudy——Python 内置函数 Built-in function
内置方法:Python中声明每一个类系统都会加上一些默认内置方法,提供给系统调用该类的对象时使用.比如需要实例化一个对象时,需要调用该类的init方法:使用print去打印一个类时,其实调用的是str ...
- 二、Ansible中playbook的变量
先看看debug模块的使用: msg:输出调试信息 var:将某个任务执行的输出作为变量传给debug模块,debug模块将其打印输出 verbosity:debug的任务级别 1:在playbo ...
- laravel的filter()方法的使用 (方法使用给定的回调函数过滤集合的内容,只留下那些通过给定真实测试的内容)
filter 方法使用给定的回调函数过滤集合的内容,只留下那些通过给定真实测试的内容: $collection = collect([1, 2, 3, 4]); $filtered = $collec ...
- 如何在idea中引入一个新maven项目
如何在idea中引入一个新的maven项目,请参见如下操作:
- Eclipse+PyDev 安装和配置
Eclipse+PyDev 安装和配置 2012-03-17 23:23:23 | 17465次阅读 | 评论:0 条 | Python开发有很多工具,其中Eclipse+Pydev 是最常见的一种 ...
- Unix/Linux进程间通信
一,Linux下进程间通信的几种主要手段简介: 1,管道(Pipe)及有名管道(named pipe) 管道可用于具有亲缘关系进程间的通信 有名管道克服了管道没有名字的限制,因此,除具有管道所具有的功 ...
- 【疑难杂症】gdb调试多线程程序报错:interrupted system call
一. cmake生成可调试版本的程序,该内容参考自https://www.linuxidc.com/Linux/2014-03/98622.htm 具体内容如下: 1, 使用CMAKE编译确实很方便. ...