文本超出显示省略号/数字英文字母折行有关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 ...
随机推荐
- matplotlib设置中文标签
import matplotlib.pyplot as plt plt.rcParams['font.sans-serif']=['SimHei']
- (简单)华为Nova青春 WAS-AL00的USB调试模式在哪里开启的流程
就在我们使用Pc接通安卓手机的时候,如果手机没有开启usb开发者调试模式,Pc则无办法成功检测到我们的手机,在一些情况下,我们使用的一些功能较强的app好比之前我们使用的一个app引号精灵,老版本就需 ...
- List根据对象的两个字段进行排序,并且有一个倒序
用java8 的lambda 表达式 list.sort(Comparator.comparing(Live::getId) .thenComparing(Live::getAppId, Compar ...
- Docker 命令查询
Docker — 从入门到实践 Docker 命令查询 基本语法 Docker 命令有两大类,客户端命令和服务端命令.前者是主要的操作接口,后者用来启动 Docker Daemon. 客户端命令:基本 ...
- ACM-ICPC 2018 徐州赛区网络预赛 HRyuji doesn't want to study 树状数组
题目链接:https://nanti.jisuanke.com/t/A2007 题目大意:有一个序列含有n个数a[1],a[2],a[3],……a[n],有两种操作: 第一种操作:k=1,l,r,询问 ...
- IDEA+Maven+Spring MVC HelloWorld示例
用Maven创建Web项目 选择webapp模板 创建成功后点Enable Auto-Import idea给我们创建出来的结构是这样的,这还不标准,需要自己修改. 在main文件夹下创建java文件 ...
- 认识Modbus协议
1.什么是Modbus? Modbus协议是应用于电子控制器上的一种通用语言.通过此协议,控制器相互之间,控制器经由网络(例如以太网)和其它设备之间可以通信.Modbus协议定义了一个控制器能认识使用 ...
- BLSTM的训练算法、解码算法以及模型的改进
摘要 BLSTM解码时,解码器需要等待整个音频到达后才开始解码,因为时间反方向的前向传播需要末尾的历史信息.BLSTM这一延时问题使其不适用与实时语音识别.context-sensitive-chun ...
- Visual Studio Code(VS code)你们都在用吗?或许你们需要看一下这篇博文
写在前面 在前端开发中,有一个非常好用的工具,Visual Studio Code,简称VS code. 都不用我安利VS code,大家就会乖乖的去用,无数个大言不惭的攻城狮,都被VS code比德 ...
- Linux下删除乱码文件
删除乱码文件 一些文件乱码