文本超出显示省略号/数字英文字母折行有关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 ...
随机推荐
- 红米Note 4X详细刷成开发版开启ROOT超级权限的教程
小米的手机不同手机型号正常情况下官方网站都提供两个不同的版本,大概分为稳定版和开发版,稳定版没有提供Root超级权限管理,开发版中就开启了Root超级权限,很多情况我们需要使用的一些功能强大的app, ...
- 【CSA49G】【XSY3315】jump DP
题目大意 有一个数轴.yww 最开始在位置 \(0\).yww 总共要跳跃很多次.每次 yww 可以往右跳 \(1\) 单位长度,或者跳到位置 \(1\). 定义位置序列为 yww 在每次跳跃之后所在 ...
- git只追踪特定类型的文件
比如我只关心所有office文档并排除掉~开头的辅助文件: * !*/ !*.docx !*.doc !*.xlsx ~*
- app Inventor
什么是App Inventor ? MIT 官方网站 http://ai2.appinventor.mit.edu/Ya_tos_form.html 广州中文镜像网站 http://app.gzjk ...
- 什么是GPIO?
”通用输入/输出口”(GPIO)是一个灵活的由软件控制的数字信号.他们可由多种芯片提供,且对于从事嵌入式和定制硬件的Linux开发者来说是比较熟 悉.每个GPIO都代表一个连接到特定引脚或球栅阵列(B ...
- 解决liblapack.so.3: cannot open shared object file: No such file or directory报错
关于这种类型的报错通常的解决方式有两个: 方法一.查找系统哪儿有liblapack.so.3这个文件 find /lib -name liblapack.so.3 如果lib找不到这个文件,请换其他路 ...
- Hadoop记录-切换NN
一.第一种方法 重启namenode(1.1.1.1 1.1.1.2)重启standby节点:1.1hadoop-daemon.sh stop zkfchadoop-daemon.sh stop na ...
- Primavera——免费版本的下载和使用
1.oracle收购了Primavera后,开启了以下版本的免费使用. 进入License Codes查看目前支持的版本,并下载与下载版本的无线许可文件. 2.下载软件 进入Oracle Softwa ...
- APP数据的爬取
前言 App 的爬取相比 Web 端爬取更加容易,反爬虫能力没有那么强,而且数据大多是以 JSON形式传 输的,解析更加简单.在 Web 端,我们可以通过浏览器的开发者工具监听到各个网络请求和响应过程 ...
- 贪吃蛇游戏——C语言双向链表实现
采用了双向链表结点来模拟蛇身结点: 通过C语言光标控制函数来打印地图.蛇身和食物: /************************** *************************** 贪吃 ...