文本超出显示省略号/数字英文字母折行有关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 ...
随机推荐
- Python 学习笔记 - 不断更新!
Python 学习笔记 太久不写python,已经忘记以前学习的时候遇到了那些坑坑洼洼的地方了,开个帖子来记录一下,以供日后查阅. 摘要:一些报错:为啥Python没有自增 ++ 和自减 --: 0x ...
- swagger.core的使用方法
Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务,那么如何在abp中使用呢,已经有大牛为我们实现了一个swagger.core的组件而作为菜鸟 ...
- Docker 入门篇
Docker 简介 作为一种新兴的虚拟化方式,Docker 跟传统的虚拟化方式相比具有众多的优势. 更高效的利用系统资源 更快速的启动时间 一致的运行环境 持续交付和部署 更轻松的迁移 更轻松的维护和 ...
- ElasticSearch常用操作命令
查看系统信息: curl 'http://username:password@192.168.0.40:9200/' curl 'http://username:password@127.0.0.1: ...
- CF235B Let's Play Osu! 期望DP
貌似是一道很裸的期望\(DP\).直接说思路: 设\(f[i]\)表示到\(i\)位置时的期望分数,但是只有\(f[i]\)的话我们发现是无法转移的,我们还需要知道到\(i\)位置时的期望连续长度,于 ...
- sklearn中的损失函数
python风控评分卡建模和风控常识(博客主亲自录制视频教程) https://study.163.com/course/introduction.htm?courseId=1005214003&am ...
- Java 集合系列之二:List基本操作
1. Java List 1. Java List重要观点 Java List接口是Java Collections Framework的成员. List允许您添加重复元素. List允许您拥有'nu ...
- hadoop记录-hive常见设置
分区表 set hive.exec.dynamic.partition=true; set hive.exec.dynamic.partition.mode=nonstrict;create tabl ...
- 实现IOC功能的简单Spring框架
需求分析 设计一个含有IOC的简单Spring,要求含有对象注册.对象管理以及暴露给外部的获取对象功能. 项目设计 对于注册的对象用一个类BeanInfo来描述其信息,包括对象标识.全类名以及属性名与 ...
- 神奇的 UNICODE 字符 : U+202E