css让文字显示特定行数,多余的显示省略号
/*css*/
.p{
width: 200px;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
-webkit-line-clamp: 2; /** 显示的行数 **/
overflow: hidden; /** 隐藏超出的内容 **/
}
1,word-break:break-all 例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长(congratulation等),它会把单词截断,变成该行末端为conra(congratulation的前端部分),下一行为tulation(conguatulation)的后端部分了。
2,word-wrap:break-word 例子与上面一样,但区别就是它会把congratulation整个单词看成一个整体,如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,而不会把单词截断掉的。
css让文字显示特定行数,多余的显示省略号的更多相关文章
- css文字超出指定行数显示省略号
display: -webkit-box; overflow: hidden; word-break: break-all; /* break-all(允许在单词内换行.) */ text-overf ...
- line-height超出隐藏显示的行数和垂直居中
line-height是css样式里设置行高的方法,在div中有overflow:hidden,可以隐藏超出div的内容,配合行高和div的高,可以设置该div里可以显示几行内容,div可以容纳几个行 ...
- eclipse怎么显示代码行数
熟悉java开发的朋友们肯定有这样的经验,那就是在用eclipse进行java开发的时候,没有显示代码的行数,这并不利于我们进行程序的调试.今天,小编就来教大家eclipse怎么显示代码行数 ...
- 【转】Eclipse Console 加大显示的行数,禁止弹出
转载地址:http://blog.csdn.net/leidengyan/article/details/5686691 Eclipse Console 加大显示的行数: 在 Preferences- ...
- eclipse显示代码行数
最近做的手机APP正在进行最后一部分了,在一个类中估计要写上千行代码,来回的拉动滚动条太麻烦了,于是发现为什么我得eclipse不显示代码行数呢 其他C什么的编译器都显示的. 于是百度了一下,一下子 ...
- css实现单行(多行)文本溢出显示 ...
overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 当然还需要加宽度width属来兼容部分浏览. 以上为单行文本溢出===== ...
- 在Vue中使用CodeMirror 格式显示错误 行数错乱 & 代码隐藏
项目需要在线展示和编辑Json文件,所以需要找一个代码编辑器,因为我们的项目直接使用的 vueAdmin-template 这个模板 json编辑器也是直接从 vue-element-admin 项目 ...
- Grid++Report设置显示固定行数
一.要实现的功能打印的报表显示固定的行数,并且设置字段的文字可以自动换行二.设置步骤1.鼠标左键单击“明细网格”栏,在右侧属性窗口中设置“追加空白行”属性值为:是:“追加空白行在后”属性值为:是.2. ...
- AIO5岗位桌面主页【我的收藏夹】只显示8行,怎样增加显示行?
问题: 为什么主页上的收藏夹只能放8个显示?超出部分显示不出来了?应该怎样操作? 解决方案: 原因分析:桌面区域(系统)内的[我的收藏夹]是固定行高的. 解决方案:通用设置里面去设置[桌面系统模块行数 ...
随机推荐
- Redis常用命令代码实例集合
//连接本地的 Redis 服务 $redis = new Redis(); $redis->connect('127.0.0.1', 6379); $redis->auth('12345 ...
- jmeter(二十八)利用beanshell进行多重断言
在接口测试中,我们对返回结果的正确性判断一般是基于响应报文的返回内容进行断言.但有些时候,按照正常的业务逻辑来说,一个请求返回的内容是多种不同的. 比如:用户注册功能,注册成功是正常的返回messag ...
- Thinkphp3.2数据库字段自动转小写,字段大小写自动转换,以及thinkphp3一些bug
公司在使用thinkphp框架,版本也有些老,被一些bug坑了,记录一下 自动转小写解决办法,最简单的就是在配置文件加上 'DB_PARAMS' => [\PDO::ATTR_CASE => ...
- Centos8 Yum 安装Nginx指定版本
查看系统和EPEL的nginx版本 dnf info nginx 通过官方 yum 源安装nginx vi /etc/yum.repos.d/nginx.repo 列出所有版本 ...
- python的matplotlib.pyplot绘制甘特图
博主本来就想简单地找一下代码,画一幅甘特图,结果百度之后发现甘特图的代码基本都不是用matplotlib库,但是像柱状图等统计图通常都是用这个库进行绘制的,所以博主就花了一些时间,自己敲了一份代码,简 ...
- git commit 后,没有push ,怎么撤销
如果是撤销到commit 之前,本地修改也放弃,可以 使用git reset --hard , 但是想保留本地修改,也想撤销commit 可以使用 git reset --mixed HEAD^ ...
- NET经典书籍必读
C#与.NET框架,入门 + 进阶 + 精通,外加并发编程实例,10本C#图书,一本都不能少. 1.<Learning hard C#学习笔记> 作者:李志 书号:978-7-115-3 ...
- spring事务详解(基于注解和声明的两种实现方式)
Spring事务( Transaction ) 事务的概念 事务是一些sql语句的集合,作为一个整体执行,一起成功或者一起失败. 使用事务的时机 一个操作需要多天sql语句一起完成才能成功 程序中事务 ...
- RENIX 软件RAW流发送——网络测试仪实操
本文主要介绍了RENIX软件如何进行RAW流发送操作.文章通过预约端口.添加RAW流.修改负载.发送流量.查看流统计.数据包捕获六个步骤详细介绍了操作过程. 步骤一:预约端口.1.先安装RENIX软件 ...
- 关于OAuth2.0 Authorization Code + PKCE flow在原生客户端(Native App)下集成的一点思考
写在前面 前几天看了园友的一篇文章被广泛使用的OAuth2.0的密码模式已经废了,放弃吧 被再次提起: Implicit Flow Password Grant,均已被标记为Legacy,且OAuth ...