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个显示?超出部分显示不出来了?应该怎样操作? 解决方案: 原因分析:桌面区域(系统)内的[我的收藏夹]是固定行高的. 解决方案:通用设置里面去设置[桌面系统模块行数 ...
随机推荐
- RxJS中高阶操作符的全面讲解:switchMap,mergeMap,concatMap,exhaustMap
RxJS中高阶映射操作符的全面讲解:switchMap, mergeMap, concatMap (and exhaustMap) 原文链接:https://blog.angular-universi ...
- python库安装中Microsoft Visual C++ is required解决方法
在用pycharm过程中,用pip去安装一些第三方包的时候会出现如下错误,缺少C++编译器,因为有些程序需要使用,没有C++接口会报错,查阅相关资料及自己的解决方案 error: Microsoft ...
- SQL从零到迅速精通【数据更新】
1.[导入表]在两个表的格式一样的情况下,将一个表的数据导入另外一个表. person_old表中现在有两条记录.接下来将person_old表中所有的记录插入到person表中,语句如下: INSE ...
- 一比一还原axios源码(四)—— Axios类
axios源码的分析,到目前为止,算上第0章已经四章了,但是实际上,还都没有进入axios真正的主线,我们来简单回顾下.最开始我们构建了get请求,写了重要的buildURL方法,然后我们处理请求体请 ...
- centos5 源失效解决办法
将源文件备份 [base] name=CentOS-$releasever - Base failovermethod=priority baseurl=http://vault.centos.org ...
- logging 日志配用
第一步,创建一个logger: 第二步,创建一个handler,用于写入日志文件: 第三步,再创建一个handler,用于输出到控制台: 第四步,定义handler的输出格式: 第五步,将logger ...
- 前端好用API之Fullscreen
前情 在前端开发需求中,特别网页有视频需求时,需要做视频全屏功能,或者在某些可视化大屏项目也要做全屏. Fullscreen介绍 让你可以简单地控制浏览器,使得一个元素与其子元素,如果存在的话,可以占 ...
- Java并发编程虚假唤醒问题(生产者和消费者关系)
何为虚假唤醒: 当一个条件满足时,很多线程都被唤醒了,但是只有其中部分是有用的唤醒,其它的唤醒都是无用功:比如买货:如果商品本来没有货物,突然进了一件商品,这是所有的线程都被唤醒了,但是只能一个人买, ...
- idea如何打包项目,部署到linux后台运行
服务器安装tomcat 上传好tomcat包 scp -r tomcat liwwww@111116.11222.101121.12111111:/opt/ linux下启动tomcat服务的命令 ...
- Bean实例化方式
https://blog.csdn.net/diaosinixiheixiu/article/details/78919395 https://www.cnblogs.com/deng-cc/p/89 ...