css文本截字,超出文本省略号显示
一、单行文本截字
p {
text-overflow: ellipsis;/*显示省略号代替裁剪的文本*/
white-space: nowrap;/*空白处理方式 不换行*/
overflow: hidden;/*溢出隐藏*/
}
效果:

二、多行文本截字
p{
display:-webkit-box;/*设置盒子为弹性盒容器*/
-webkit-box-orient:vertical;/*设置盒子内部排列方式为垂直排列*/
-webkit-line-clamp:;/*显示两行*/
text-overflow:ellipsis;/*用省略号代替才建的文字*/
overflow:hidden;/*溢出隐藏*/
/*若为纯字母、数字,需要加上下面这句*/
word-break:break-all;
}
效果

css文本截字,超出文本省略号显示的更多相关文章
- android开发之当设置textview多少字后以省略号显示。限制TextView的字数
设置多少字后以省略号显示 <TextView android:id="@+id/tv" android:layout_width="wrap_conten ...
- css实现文本超出部分省略号显示
一般超出文本显示分为两种:单行超出文本和多行超出文本省略号显示,实现方式使用纯css实现: div { // 单行 white-space: nowrap; overflow: hidden; tex ...
- 翻译:如何使用CSS实现多行文本的省略号显示
本文翻译自CSS Ellipsis: How to Manage Multi-Line Ellipsis in Pure CSS,文中某些部分有些许改动,并添加译者的一些感想,请各位读者谅解. 合理的 ...
- CSS文本单行或者多行超出区域省略号(...)显示方法
单行超出时,主要用到几个CSS属性: 1.text-overflow : clip | ellipsis ; clip : 不显示省略标记(...),而是简单的裁切ellipsis : 当对象内文本溢 ...
- 文本太长,用省略号显示的css样式
——html代码 <divid="d1" title="鼠标放上显示的文字"></div> ——css代码 #d1{ width:300 ...
- CSS div内文字显示两行,超出部分省略号显示
1. 概述 1.1 说明 在项目过程中,有时候需要控制div内文字最多显示两行,超出的使用省略号进行处理.使用识别码/前缀-webkit进行处理可直接得到相应效果. 1.1 -webkit WebKi ...
- css 文字展示两行 其余的省略号显示
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- HTML5--div、span超出部分省略号显示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 微信小程序 实现多行文字 超出部分省略号显示
在开发小程序: 澳买 的 时候 遇到一个棘手的问题: 当搜索澳洲产品,获取产品列表的时候,有时候产品的名称翻译成中文特别长 我们不能全部在有限的列表里面把产品名都显示出来,这样格式不好控制,显示 出来 ...
随机推荐
- Linux 一直提示 login incorrect
- IT人的格言警句
程序员困境:我们通过编码谋生,但环境却正在摧毁我们这种谋生的能力. 在技术日新月异的IT行业,“专家”这个词其实是个危险信号,意味着你的知识距离老化不远了.IT工程师应该经常更换工作领域,了解多个领域 ...
- wxpython Menus and toolbars
Menus and toolbars A common part in a GUI application is a menubar. A menubar consists of objects ca ...
- python 按值排序
转自:http://www.cnpythoner.com/post/266.html,感谢分享! python 字典(dict)的特点就是无序的,按照键(key)来提取相应值(value),如果我们需 ...
- 编译时提示软件包 javax.servlet.http 不存在 import javax.servlet.http.HttpServletRequest;
编译时错误:软件包 javax.servlet.http 不存在import javax.servlet.http.HttpServletRequest; 解决办法:把servlet-api.jar加 ...
- nagios外部命令接口
http://nagios.manubulon.com/traduction/docs14en/extcommands.html https://old.nagios.org/developerinf ...
- Flask入门文件上传flask-uploads(八)
1 视图传递多个参数 (1) 普通传参 : 关键字参数传递 return render_template('模板名称.html',arg1=val1,arg2=val2...) (2) 字典传参 : ...
- 【Spring实战】—— 9 AOP环绕通知
假如有这么一个场景,需要统计某个方法执行的时间,如何做呢? 典型的会想到在方法执行前记录时间,方法执行后再次记录,得出运行的时间. 如果采用Spring的AOP,仅仅使用前置和后置方法是无法做到的,因 ...
- npm proxy设置网络代理 并使用taobao registry
npm config set https-proxy http://server:portnpm config set proxy http://server:port npm set registr ...
- HDU 1757 A Simple Math Problem 【矩阵经典7 构造矩阵递推式】
任意门:http://acm.hdu.edu.cn/showproblem.php?pid=1757 A Simple Math Problem Time Limit: 3000/1000 MS (J ...