单行文本溢出和多行文本溢出省略...
平时在开发过程中,很常见的需求就是文字溢出显示... 此类需求有以下集中方法来解决
1. 单行溢出显示...
overflow:hidden;
width: 200PX;
white-space:nowrap;
text-overflow:ellipsis;
2. 多行文本溢出显示...
只支持webkit内核
width: 200px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3; // 几行
-webkit-box-orient: vertical; //子元素应该被水平或垂直排列
3.利用js进行字符串长度截取
(取巧型,不建议,实在没招了可以采用)
我们模拟在一行中大概可以容下多少个字,然后我们再根据想要实现几行后截取的需求进行自定义截取长度。
例:比如说一行只能放在5个字,就换行了。然后我们想实现3行显示... (这样其实我们截取12个字符串长度就可以了。)
let str = '你你你你你你你你你你你你你你你你你' // 17个字
let newStr = str.substr(0, 12); // 截取12个字
newStr = newStr + '...';
// newStr就是得到截取之后带...的了
单行文本溢出和多行文本溢出省略...相关推荐
- 单行文本溢 和 多行文本溢出
一.单行文本溢出 最常见的使用,直接贴出代码: .text {white-space: nowrap;text-overflow: ellipsis;overflow: hidden; } 二.多行文 ...
- [css] 实现单行文本居中和多行文本左对齐并超出显示“...“
[css] 实现单行文本居中和多行文本左对齐并超出显示"-" .one {text-align: center }.multi {overflow: hiddentext-over ...
- [前端] 实现单行文本溢出和多行文本溢出省略
项目中经常会用的标题或摘要超出省略的功能,从网找了一些参照,在这里写一下,希望对你有帮助... 一.单行文本溢出省略 CSS样式: <style>.box {width: 120px;he ...
- 单行文本省略号和多行文本省略号
1.单行文本省略号 overflow:hidden; //多余的部分隐藏 white-space:nowrap; //让文字强制一行显示 text-overflow:ellipsis; //多余的部分 ...
- 单行文本垂直居中和多行文本垂直居中以及font字体
单行文本垂直居中 <style>*{margin: 0;padding: 0;}.box{width: 300px;margin: 20px auto 0;border: 1px soli ...
- css:实现文本两行或多行文本溢出显示省略号
div{display: -webkit-box;-webkit-box-orient: vertical;word-break: break-all;word-wrap: break-word; w ...
- CSS+JS+Vue:单行、多行文本溢出显示省略号...的几种实现方式
背景:近期H5项目有个UI需求,单行文本超长时,超出的部分...省略且有一个查看的图标:否则正常展示. 在此背景下了总结下文本溢出的几种实现方式. 1.单行文本溢出[纯css] 效果: <!-- ...
- CSS基础: 单行和多行文本溢出显示省略号
文本溢出后很多,会显示一些省略号,这个在很多网站都会这样做,从技术层次来分析有两种,一种是前端通过css或者JavaScript进行进行,还有一种是后端传递文字的时候,本身处理完长度,然后返回一个嗲有 ...
- CSS中的单行、多行文本溢出总结
文章目录 写在前面 一.用到的相关属性 1.white-space 2.word-break 3.text-overflow: 4.`overflow` 二.单行文本溢出 三.多行文本溢出 写在前面 ...
最新文章
- 独家 | ​PyMC3 介绍:用于概率编程的Python包
- 必须对手机内置业务制定规范防止后门
- JDK提供的原子类原理与使用
- UI设计:掌握这6点,轻松0到1
- linux如何格式化u盘并挂载,Linux下 格式化U盘和挂载
- (四)开源C# WPF控件库《AduSkin – UI》
- android studio升级时提示 Connection failed. Please check your network connection and try again
- mat查找多线程并发下大对象导致的堆内存问题
- 字符编码在python中的处理_Python 字符编码处理总结
- 基于互信息的特征选择算法MATLAB实现
- 2021-08-08 idea 连接Mysql
- 现代优化算法 之 遗传算法
- 方正字库的手写字体开始出真GBK了
- c# WPF中通过双击编辑DataGrid中Cell的示例(附源码)
- 【Chrome扩展程序】content_script 的跨域问题
- hao123站长李兴平的成功史
- 秀动app抢票脚本_程序员硬核quot;Python抢票教程”,帮你抢回家车票
- 嵌入式开发必须学习qt吗?
- 风口的猪?中国智能家居恐因没有专利集体阵亡
- 怎么用计算机录像,怎么用电脑自带屏幕录制工具?免费录制方法
热门文章
- 面向接口编程的好处分析
- 数字信号处理——CFAR检测器设计(4)
- JavaScript 可视化框架汇总
- mybatisPlus 自定义sqlSessionFactory sql注入器失效 Invalid bound statement (not found): insertBatchSomeColumn
- nanomsg 框架简介
- 来一波自动玩“别踩白块“脚本(三种方法)
- OSI七层网络协议,网络协议的层次结构
- Matter协议特性解析(三) 设备发现,认证和配网
- 接口备份和双机热备份配置与管理——3
- 怎么在线录制电脑内部声音