Html中文字过多,单行超出和多行超出显示省略号
单行:
<!--单行--> <p class="pl">这个属性定义溢出元素内容区的内容会如何处理。如果值为 hidden,当点击hidden时,滚动机制关闭,</p>
CSS
/*单行文本的溢出显示省略号*/.pl{width: 200px;overflow:hidden;text-overflow:ellipsis; background: goldenrod;white-space: nowrap;/*加宽度width属来兼容部分浏览*/}
多行:
<div id="p2">这个属性定义溢出元素内容区的内容会如何处理。如果值为 hidden,当点击hidden时,滚动机制关闭,内容会被修剪,但是浏览器不会显示供查看内容的滚动条,默认值是 visible。这是一个段落。这是一个段落。这是一个段落。这是一个段落。 </div>
CSS
/*多行文本溢出显示省略号*/#p2{width: 220px;height: 58px;overflow:hidden;text-overflow:ellipsis; background: greenyellow;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;/*-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。-webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。*/}
转载于:https://www.cnblogs.com/cl94/p/9531892.html
Html中文字过多,单行超出和多行超出显示省略号相关推荐
- html合并单元格怎么把字竖着,电脑excel单元格中文字如何在合并单元格后竖排显示...
电脑excel单元格中文字如何在合并单元格后竖排显示 excel软件是我们现在经常使用的数据处理工具之一,接下来小编就教大家怎样在软件中设置合并单元格之后竖排显示文字. 具体如下: 1. 首先我们需要 ...
- elementui中,表格里的文字设置指定行溢出显示省略号,并且鼠标放上去能看到全部的文字
嗨害嗨,我又来了奥.今天呢,遇到有人问了一个这样的问题,就是如果在elementui中,表格里的文字设置指定行溢出显示省略号,并且鼠标放上去能看到全部的文字,该怎么做. 首先,我们知道elementu ...
- CSS基础: 单行和多行文本溢出显示省略号
文本溢出后很多,会显示一些省略号,这个在很多网站都会这样做,从技术层次来分析有两种,一种是前端通过css或者JavaScript进行进行,还有一种是后端传递文字的时候,本身处理完长度,然后返回一个嗲有 ...
- css多行超出显示点_CSS实现单行、多行文本溢出显示省略号(…)
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...
- java让内容不超出单元格_html表格中单元格内容超出不换行和超出宽度自动隐藏并显示省略号及鼠标移入显示全部内容/移出隐藏(用title属性)...
参考https://www.cnblogs.com/yy-hh/p/4523939.html 在表格布局中经常会遇到因为表格内容长短的变化导致错位布局混乱的情况,这个时候我们可能会有为了布局稳定把单元 ...
- 解决html表格中内容超出不强制换行和超出宽度自动隐藏并显示省略号
在表格布局中经常会遇到因为表格内容长短的变化导致布局混乱的情况,这个时候我们可能会有为了布局稳定把单元格宽度写死的情况:但是我们设置了宽度却发现超出了宽度之后会自动变大,用css定义元素的overfl ...
- 解决表格中内容超出不强制换行和超出宽度自动隐藏并显示省略号
在表格布局中经常会遇到因为表格内容长短的变化导致布局混乱的情况,这个时候我们可能会有为了布局稳定把单元格宽度写死的情况:但是我们设置了宽度却发现超出了宽度之后会自动变大,用css定义元素的overfl ...
- CSS+JS+Vue:单行、多行文本溢出显示省略号...的几种实现方式
背景:近期H5项目有个UI需求,单行文本超长时,超出的部分...省略且有一个查看的图标:否则正常展示. 在此背景下了总结下文本溢出的几种实现方式. 1.单行文本溢出[纯css] 效果: <!-- ...
- 关于单行和多行文本溢出显示省略号的解决方案
今天研究了一下文本溢出显示省略号的方案,在网上一搜,资料很多,但是不是所有都是正确的. 单行文本溢出: 1.使用text-overflow:ellipsis; 这种方法在除firefox的其他浏览器中 ...
最新文章
- linux 预加载 动态链接库rootkit 简介
- 《漫画算法》源码整理-4 大顶堆 小顶堆 优先队列
- 密码技术应用--AES文件加解密
- Appium Python 六:管理应用和Activity
- React开发(226):默认方法返回一个新的参数两个括号
- [转]VS 2003 常用快捷键
- nodejs总结之redis模块
- 图嵌入方法基础学习之Node2vec
- BT5的xprobe2的操作实例
- FIR versus IIR Butterworth Chebyshev Bessel Filter
- 5G网络中的缩略语与简写
- 实在人做实干型产品——专访凯特伟业CEO云凤程
- php+矩阵,PHP实现简单矩阵算法
- C语言基本语法——循环篇(三种常见的循环)
- JavaScript贷款计算器
- 异常解决:java.lang.IllegalStateException: Failed to introspect Class
- 微软裁员和.NET的开源
- tp5.1 乐视云上传视频文件(https请求http乐视云上传接口)http网址下上传视频(https API接口)
- Latex中自动引用参考文献的方法,一分钟搞定
- 【OpenPose-Windows】OpenPose1.4.0+VS2017+CUDA9.2+cuDNN9.2+Windows配置教程
热门文章
- 【Go】优雅的读取http请求或响应的数据-续
- 如何选择使用IEnumerable, ICollection, IList
- bzoj2257瓶子与燃料——最大公约数
- 林森---博客园之二,对《闭包》的个人见解!希望能帮到不理解闭包的同学们!...
- Scala学习笔记(二)表达式和函数
- 组合数学之排列组合(Permutations and Combinations)(四种情况)
- android 联系人存储结构
- 路直路弯,面对挫折脚步不放慢
- pytho---之easydict使用
- 【学习OpenCV4】什么是图像的直方图?如何获取直方图?