文本超出显示省略号:

定容器宽度

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. luogu P1602 Sramoc问题

    嗯...这篇题解写的原因是一位大佬网友问我的题 本蒟蒻为了纪念下这一刻,就写了 我只会写一写基本思路,经不起推敲 还是大家凑活看吧 重点来了 在bfs时,队列里的每个元素由一个高精度的数和那个数模m的 ...

  2. k8s集群Canal的网络控制 原

    1 简介 直接上干货 public class DispatcherServlet extends HttpServlet { private Properties contextConfigProp ...

  3. foreach 中获取索引index的方法

    一样,很少用到,记下来先 主要代码: foreach (var item in arr) { int index = arr.indexOf(item); //index 为索引值 }

  4. Matrix-tree 定理的一些整理

    \(Matrix-tree\) 定理用来解决一类生成树计数问题,以下前置知识内容均是先基于无向无权图来介绍的.有关代数余子式的部分不是很明白,如果有错误还请指出-- 部分内容参考至:\(Blog\_1 ...

  5. 03--STL序列容器(Deque)

    一:Deque双端队列<头尾操作> stack和queue是在Deque的基础上改进的,所以先介绍双端队列Deque     deque是“double-ended queue”的缩写,和 ...

  6. 转载:在做datatable时候查询数据和条数只用一次sql就可以解决需求

    前言:最近用datatable处理数据比较多,所以在使用时候想提升性能 select * from t_hr_leave SELECT FOUND_ROWS() //返回查询记录的总数 select ...

  7. python之路(4)高阶函数和python内置函数

    前言 函数式编程不用变量保存状态,不改变变量 内置函数 高阶函数 把函数当作参数传给另一个对象 返回值中包含函数 使用的场景演示: num_test = [1,2,10,5,8,7] 客户说 :对上述 ...

  8. 【ARC 063F】Snuke's Coloring 2

    Description There is a rectangle in the xy-plane, with its lower left corner at (0,0) and its upper ...

  9. Microsoft Internet Explorer v11 / XML External EntityInjection 0day

    [+] Credits: John Page (aka hyp3rlinx) [+] Website: hyp3rlinx.altervista.org[+] Source:  http://hyp3 ...

  10. 2018-2019-2 20165337《网络攻防技术》Exp5 MSF基础应用

    一.实践目标 1.一个主动攻击实践 ms08_067 2.一个针对浏览器的攻击 ms13-069 3.一个针对客户端的攻击 adobe (Adobe_toolbutton客户端漏洞) 4.成功应用任何 ...