【Taro工作记录二】如何实现文字溢出出现省略号
目录
前言
需求
解决思路:
总结
结果
前言
我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷
需求
今天我们公司领导找我 说这边有个需求需要你做一下 你的样式错位了
解决思路:
全文用了弹性布局 这个文字一多就会溢出了 这个时候就需要进行一个溢出处理
我们来看看处理的代码 最终结果
.myRight_content_header_left{width:200px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;.myRight_content_header_left_text{font-size: 28px;font-family: PingFangSC-Medium, PingFang SC;font-weight: 500;color: #333333;line-height: 40px;}}
总结
要点1 需要用盒子包装样式
要点2text-overflow: ellipsis;white-space: nowrap;overflow: hidden;这段代码
结果
【Taro工作记录二】如何实现文字溢出出现省略号相关推荐
- qtreewidgetitem 文字内存太长换行_table文字溢出显示省略号问题
每日金句 『专注做一件事』2009 年的<麻省理工科技评论>(MIT TechnologyReview)中有一篇文章写道,人脑的带宽只有区区60比特/ 秒,是(那个年代)上网带宽的十万分之 ...
- HTML+CSS:移动端分辨率、视口、Flex布局、文字溢出显示省略号、溢出两行显示省略号
文章目录 一.分辨率分类 二.视口 三.Flex布局 3.1 justify-content 主轴对齐方式 3.2 align-items 侧轴的对齐方式 3.3 伸缩比 flex:value; 3. ...
- table文字溢出显示省略号问题
每日金句 『专注做一件事』 2009 年的<麻省理工科技评论>(MIT TechnologyReview)中有一篇文章写道,人脑的带宽只有区区60比特/ 秒,是(那个年代)上网带宽的十万分 ...
- H5 自适应正方形图片与文字溢出产生省略号
1.正方形图片:有时候前端获取到的图片大小不一样,固定宽高会变形,不固定宽高排版又会乱,所以要求图片不变形的情况下正方形展示,这样也不影响排版 代码如下: <div><div cla ...
- CSS 多行文字溢出显示省略号效果
.box1{width: 100px;/* height: 100px; */border: 1px solid #ccc;overflow: hidden;text-overflow: ellips ...
- 单行文字、多行文字溢出时省略号表示的多种解决方式;调整字符间距;段落首字母大写缩进效果;
文本溢出省略号表示的实现效果: 1.解决单行文字溢出: 解决方式: 在文字容器样式中添加 overflow:hidden; text-overflow:ellipsis; white-space: n ...
- css表格省略号,CSS 文本和表格中文字溢出显示省略号
一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加*/ width:31em; word-break:keep-all;/* 不换行 * ...
- CSS 文字溢出显示省略号
溢出显示省略号的代码:其中 1 是行数. overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-c ...
- CSS 强制不换行,文字溢出显示省略号~
1. 强制不换行 white-space: nowrap; 文本强制不换行: text-overflow:ellipsis; 文本溢出显示省略号: overflow:hidden; 溢出的部分隐藏: ...
最新文章
- 后生可畏!中国军团称霸阅读理解竞赛RACE:微信AI称王,高中生力压腾讯康奈尔联队(附资料)...
- IPv6相比IPv4在那些方面做出了改进?IPv4 to IPv6过渡的三种tunnel技术各自的特性...
- 开发笔记7 | 部署 Go 应用程序到阿里云 ECS
- python os模块详细用法
- mysql常用命令及问题汇总
- COMBOBOX绑定DICTIONARY做为数据源
- Linux+CLion+cmake 动态链接库的使用
- 一亿小目标成就_成就卓越的一种方式:自我选择
- 优化 WordPress 后台设置教程
- Oracle ROLLUP和CUBE 用法
- 荣耀赵明:电视开关机广告不符合商业逻辑 用户需享受收益分成
- 数据库三范式,轻松理解
- 【转】context和getApplicationContext()介绍
- 如何在word 里插入代码?
- 短信验证码的发送、接收验证流程
- JavaWeb学习笔记(上)
- reactjs遍历数据的方式
- 基于Labview的瀑布图的生成
- 别在找提高C++晦涩难懂的知识了。提高效率!这里有C++STL——全面总结详细教程(附案例解析)(持续更新中)
- python getcwd_Python os.getcwd()函数的实际应用方案介绍
热门文章
- chrome浏览器如何将网页保存为图片
- Directx11进阶教程PBR(2)之BRDF
- 钾PHP,纳米人-大牛吴屹影综述:钾氧电池这五年!
- 基金申请-5:如何键入短连字符(连接符、短横线) hyphen/en dash/em dash?
- iPad2使用心得和应用推荐(不定期更新)
- 获取数组中的某段数组元素
- php file_put_contents 换行追加,PHP中file_put_contents追加和换行的实现方法
- 智慧工地助力建筑行业长期健康发展
- 从美军提出“战场物联网”概念看物联网安全
- 简单粗暴:如何把vue ui(vue可视化界面(GUI))弄出来