文本超出显示省略号/数字英文字母折行有关css 属性/显示两行,第二行省略号显示css方法
文本超出显示省略号:
定容器宽度
overflow: hidden;
text-overflow: ellipsis; 文本超出显示省略号
white-space:nowrap; 强制文本不换行
折行
word-break:break-all; 英文单词会分开折行
word-wrap:break-word; 英文单词完整处折行
另拓展:
word-spacing :5px; 单词/字符之间间隔距离
white-space
是字符是否换行显示的(一般用强制不换行nowrap)。
------------ 骚气分割线 ----------------
截取字符串之—— 第二行显示省略号(css方法)
需求:产品介绍在第二行的时候才显示省略号,而不是第一行超出马上就出现省略号(图例:京东H5网站产品介绍)
css代码:
overflow:hidden;
text-overflow: ellipsis;//显示省略号
display:-webkit-box;
-webkit-line-clamp:2;//块元素显示的文本行数
-webkit-box-orient:vertical;
文本超出显示省略号/数字英文字母折行有关css 属性/显示两行,第二行省略号显示css方法的更多相关文章
- C# 使用js正则表达式,让文本框只能输入数字和字母,最大长度5位
使用js正则表达式,让文本框只能输入数字和字母,最大长度5位,只需要加个onkeyup事件,即可简单实现 <asp:TextBox ID="txtBegin" runat=& ...
- 用Jquery控制文本框只能输入数字和字母
用Jquery控制文本框只能输入数字和字母 $.fn.onlyNum = function () { $(this).keypress(function (event) { var eventObj ...
- css让文字,字母折行
加上如下的CSS设置,就是设定好宽度width,然后设置合适的word-wrap和word-break属性: ul li{ width: 100px; word-wrap: break-word; w ...
- 不值一提,却又不得不提的“CSS文本超出部分省略号代替”
偶然看到一篇类似css技巧与经验总结的文章,其中有一部分非常熟悉,那就是“css控制元素内文本超出部分使用省略号代替”,一般实际工作中, 很多产品经理会对页面UI有这样的要求.还记得,第一次做这个功能 ...
- css中文本超出部分省略号代替
p{ width: 100px; //设置p标签宽度 white-space: nowrap; //文本超出P标签宽度不换行,而是溢出 overflow: hidden; //文本超出P标签,超出部分 ...
- html文本超出加省略号
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...
- php---------正则判断字符串中是否由汉字 数字 英文字母组成
开发中常常用到正则表达式,分享两个常用的正则表达式,php检查字符串是否由汉字,数字,英文字母,下划线组成, 注意这里只是针对utf-8字符集的字符串检查. 数字 汉字 英文字母: if (!preg ...
- 关于H5 移动端css 文本超出时省略号 失效的问题
之前写代码的时候遇到一个问题,就是用了下面这段css代码来让文字超出范围隐藏并显示省略号. overflow: hidden; text-overflow: ellipsis; display: -w ...
- 微信小程序-超出部分显示省略号(单行与多行)
/*单行*/ .work_font{ display:block /*这里设置inline-block或者block:根据使用情况来定(行内元素需要加这个,块级元素和行内块级可以不用)*/ white ...
随机推荐
- ctx中的body无法找到
学习koa的时候看到廖雪峰大大的文章 其中有一段写的总是报错找不到name 代码如下 router.get('/', async (ctx, next) => { ctx.response.bo ...
- Want To Say Something
2019.3.3 明天要演讲了,在这里为自己打一下气! 加油! 2019.3.31 停课三周的第一次写日志 怎么说这三周结交了很多八班的朋友 在竞赛上一直在学数论快学吐了,但没办法呀还是要为出 ...
- 20165223《网络对抗技术》Exp2 后门原理与实践
目录 -- 后门原理与实践 后门原理与实践说明 实验任务 基础知识问答 常用后门工具 实验内容 任务一:使用netcat获取主机操作Shell,cron启动 任务二:使用socat获取主机操作Shel ...
- OpenLayers学习笔记(十一)— 飞机速度矢量线预测
在机场使用的空管系统中,飞机的速度矢量线差不多是这样的: 模拟飞机飞行时的速度矢量线,这里就大概做个类似效果: 什么叫速度矢量线呢,个人理解就是根据飞机当前速度和航向预测它在未来一段时间内的飞机轨迹, ...
- 树莓派中QT实现I2C
树莓派中QT实现I2C 在QT中实现 I2C 使用的驱动为 wiringPi 库的引入 LIBS += -lwiringPi LIBS += -lwiringPiDev 代码实现 widget.h 中 ...
- Jenkins安装后无法安装插件
处理方法 Jenkins -- 管理插件 -- 高级 -- 升级站点 将URL 中的https 改为 http
- echarts 折线拐点收藏
拐点的样式有:
- python全栈开发中级班全程笔记(第二模块、第三章)(员工信息增删改查作业讲解)
python全栈开发中级班全程笔记 第三章:员工信息增删改查作业代码 作业要求: 员工增删改查表用代码实现一个简单的员工信息增删改查表需求: 1.支持模糊查询,(1.find name ,age fo ...
- 【SQL】ROW_NUMBER() OVER(partition by 分组列 order by 排序列)用法详解+经典实例
#用法说明 select row_number() over(partition by A order by B ) as rowIndex from table A :为分组字段 B:为分组后的排序 ...
- Ubuntu16.04安装及配置nginx
Nginx ("engine x") 是一个高性能的 HTTP 和 反向代理 服务器,也是一个 IMAP/POP3/SMTP 代理服务器. Nginx 是由 Igor Sysoev ...