文本超出显示省略号:

定容器宽度

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方法的更多相关文章

  1. C# 使用js正则表达式,让文本框只能输入数字和字母,最大长度5位

    使用js正则表达式,让文本框只能输入数字和字母,最大长度5位,只需要加个onkeyup事件,即可简单实现 <asp:TextBox ID="txtBegin" runat=& ...

  2. 用Jquery控制文本框只能输入数字和字母

    用Jquery控制文本框只能输入数字和字母 $.fn.onlyNum = function () { $(this).keypress(function (event) { var eventObj ...

  3. css让文字,字母折行

    加上如下的CSS设置,就是设定好宽度width,然后设置合适的word-wrap和word-break属性: ul li{ width: 100px; word-wrap: break-word; w ...

  4. 不值一提,却又不得不提的“CSS文本超出部分省略号代替”

    偶然看到一篇类似css技巧与经验总结的文章,其中有一部分非常熟悉,那就是“css控制元素内文本超出部分使用省略号代替”,一般实际工作中, 很多产品经理会对页面UI有这样的要求.还记得,第一次做这个功能 ...

  5. css中文本超出部分省略号代替

    p{ width: 100px; //设置p标签宽度 white-space: nowrap; //文本超出P标签宽度不换行,而是溢出 overflow: hidden; //文本超出P标签,超出部分 ...

  6. html文本超出加省略号

    如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...

  7. php---------正则判断字符串中是否由汉字 数字 英文字母组成

    开发中常常用到正则表达式,分享两个常用的正则表达式,php检查字符串是否由汉字,数字,英文字母,下划线组成, 注意这里只是针对utf-8字符集的字符串检查. 数字 汉字 英文字母: if (!preg ...

  8. 关于H5 移动端css 文本超出时省略号 失效的问题

    之前写代码的时候遇到一个问题,就是用了下面这段css代码来让文字超出范围隐藏并显示省略号. overflow: hidden; text-overflow: ellipsis; display: -w ...

  9. 微信小程序-超出部分显示省略号(单行与多行)

    /*单行*/ .work_font{ display:block /*这里设置inline-block或者block:根据使用情况来定(行内元素需要加这个,块级元素和行内块级可以不用)*/ white ...

随机推荐

  1. 存储类&作用域&生命周期&链接属性

    链接属性 (1)大家知道程序从源代码到最终可执行程序,经历的过程:编译.链接. (2)编译阶段就是把源代码搞成.o目标文件,目标文件里面有很多符号和代码段.数据段.bss段等分段.符号就是编程中的变量 ...

  2. Day054--MySQL, 创建用户和授权, 数据类型, 枚举和集合, 约束,唯一, 主键,外键

    创建用户和授权 1.创建用户: # 指定ip:192.118.1.1的mjj用户登录 create user 'mjj'@'192.118.1.1' identified by '123'; # 指定 ...

  3. 使用基本MVC2模式创建新闻网站

    MVC简介 所谓MVC,即Model-View-Controller. (1)Model层:Model指模型部分,一般在应用中Model层包括业务处理层和数据访问层.数据访问层主要是对数据库的一些操作 ...

  4. HBase读写的几种方式(三)flink篇

    1. HBase连接的方式概况 主要分为: 纯Java API读写HBase的方式: Spark读写HBase的方式: Flink读写HBase的方式: HBase通过Phoenix读写的方式: 第一 ...

  5. shell拼写检查,利用Linux字典

    rename #find path -type  f -name "*.mp3" -exec mv { } target_dir \; #mp3 file mv dir_file ...

  6. python中的图像数据库PIL

    from PIL import Image im = Image.open("图片路径") im.function() 常用的函数: 1.im.crop(x,y,x1,y1) 对图 ...

  7. Java SE之[静态成员/类成员]与[非静态成员/实例成员]【static】

    定义 静态成员:又称类成员,使用static修饰符的方法和变量: 非静态成员:又称实例成员,未使用static修饰符的方法和变量. 结论 注:jdk1.8 测试源码 public class Main ...

  8. Redis的集群搭建

    一.集群的搭建 1.准备工作 (1)安装ruby环境 redis集群管理工具redis-trib.rb依赖ruby环境,首先需要安装ruby环境: yum -y install ruby yum -y ...

  9. 【vue】渲染大量数据时性能优化

    对应vue渲染大量数据时可以考虑下面几点: 1. 异步渲染组件:因为组件渲染太多,影响页面的渲染时间,所有可以延迟组件渲染,可以考虑v-if处理 2. 可以使用虚拟滚动的组件:参考使用这个插件 vue ...

  10. ssm多数据源配置

    1.在.properties配置文件中 添加第二个数据源信息(type2,driver2, url2,username2,pawwword2) 2.修改spring-context.xml(src/m ...