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个显示?超出部分显示不出来了?应该怎样操作? 解决方案: 原因分析:桌面区域(系统)内的[我的收藏夹]是固定行高的. 解决方案:通用设置里面去设置[桌面系统模块行数 ...
随机推荐
- Caffe2源码解析
写在前面 上一篇文章对Caffe2中的core模块进行了简单拆解Caffe2源码解析之core,本篇给出其它模块的拆解,目的是大致了解每个模块的内容和目标,进一步理解Caffe2的整体框架.内容不多, ...
- elasticsearch高亮之highlight原理
一.highlight简介 highlight是提升用户体验的重要手段,搜索引擎通过高亮突出命中关键字等方式,方便用户通过关键字周围的信息快速的确认是否是自己希望的结果: highlight功能通常包 ...
- es6 快速入门 系列 —— 对象
其他章节请看: es6 快速入门 系列 对象 试图解决的问题 写法繁杂 属性初始值需要重复写 function createPeople(name, age){ // name 和 age 都写了 2 ...
- How Do Vision Transformers Work?[2202.06709] - 论文研读系列(2) 个人笔记
[论文简析]How Do Vision Transformers Work?[2202.06709] 论文题目:How Do Vision Transformers Work? 论文地址:http:/ ...
- 面试官:Redis中的缓冲区了解吗
hello 大家好,我是七淅(xī). Redis 大家肯定不陌生,但在使用层面看不到的地方,就容易被忽略.今天想和大家分享的内容是 Redis 各个缓冲区的作用.溢出的后果及优化方向. 在开始正文前 ...
- Twist the Permutation 数列的轮换题 Codeforces 776 div3
这是一道比较经典的将数列中的数字轮换的题目,我们先看题干: 题干分析:先浅浅地分析一下题目是要我们干什么,我们会默认有一个已经升序排序地1~n的排列,然后我们会给定一个新排列是在原有排列的基础上进行o ...
- Haproxy之负载均衡功能、基于cookie的session持久、haproxy自带的健康页面及其动静分离的实现
实验前提: 1.本次实验是在Centos 7.4(64bit)系统上完成的.2.实验前确保每台服务器时间同步3.本次实验有3台主机,其中haproxy作为反向代理地址为192.168.31.43,后面 ...
- GoldenEye
靶机准备 将靶机ova文件导入虚拟机,并将网络模式设置为NAT 先进行ip扫描 netdiscover -r 192.168.164.0/24 kali:192.168.164.137 渗透测试 扫描 ...
- toppo-1
靶机准备 由于是.vmdk文件,新建一个虚拟机把硬盘移除,在将此vmdk文件添加为新硬盘即. 开机发现给出了ip地址:192.168.164.184,且当前网络模式为NAT 将kali也设置为NAT模 ...
- CEPH-2:rbd功能详解及普通用户应用ceph集群
ceph集群rbd使用详解 一个完整的ceph集群,可以提供块存储.文件系统和对象存储. 本节主要介绍rbd存储功能如何灵活的使用,集群背景: $ ceph -s cluster: id: 53717 ...