文本超出显示省略号:

定容器宽度

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. mysql varcahr转int类型

    cast(yysid as SIGNED INTEGER)

  2. 自动化测试框架【windows版】:JMeter + Ant + Jenkins

    前提条件:windows安装了jmeter.ant.jenkins 安装方法参考汇总目录中对应的博文 截图看不清的,可以调大浏览器倍数看 jenkins驱动ant执行,ant驱动jmeter执行 an ...

  3. 对于CAN ID的理解

    本文主要讲的是自己对于CAN ID的理解,希望对需要的人有帮助,本文以通俗的方式来理解,不涉及到具体CAN通信. 在接触CAN之前,应该接触过IIC通信,在IIC通信中,在同一条IIC通信总线上每个d ...

  4. MVN TEST指定运行脚本

    clean:表示将你上一次编译生成的一些文件删除 test:表示只执行测试代码 >mvn clean test -Dtest=[ClassName] 运行测试类中指定的方法:这个需要maven- ...

  5. css解决图片拉伸问题

    在实际场景中,我们经常会遇到图片大小固定的需求,但是由于原始图片大小,比例不一样,不同图片以相同的大小展示会参差不齐.解决方法就是object-fit或者background-size属性.他们的区别 ...

  6. vue+axios实现文件下载

    功能:点击导出按钮,提交请求,下载excel文件: 第一步:跟后端童鞋确认交付的接口的response header设置了 axios({ method: 'post', url: 'api/user ...

  7. java强引用 软引用 弱引用 虚引用

    https://www.cnblogs.com/yw-ah/p/5830458.html Java四种引用包括强引用,软引用,弱引用,虚引用. 强引用: 只要引用存在,垃圾回收器永远不会回收Objec ...

  8. IIS8的SNI功能实现同一服务器多HTTPS站点

    名词解释: SNI指是一项用于改善SSL/TLS的技术,在SSLv3/TLSv1中被启用.它允许客户端在发起SSL握手请求时(具体说来,是客户端发出SSL请求中的ClientHello阶段),就提交请 ...

  9. DB(1):SQLAPI catch [Bind variable/parameter 'pay_acc_id' not found] !!!

    SQLAPI catch [Bind variable/parameter 'pay_acc_id' not found] !!! 出现这种报错,先检查命令类后面的参数是否混淆(SACommand s ...

  10. express起一个代理服务器,webpack-dev-server同时起多个

    由于系统业务比较复杂,微前端(多页应用)实现期望用一个app一个webpack的形式,这样可以更好隔离,而且每个app的webpack config可以定制. Nginx在前端项目中安装比较麻烦,所以 ...