做这个省略的问题，突然发现显示省略号是有中英文区分的

我做两行的时候用的是以下代码，在是中文的情况下是么得问题，到了英文下发现不起作用了

            width: 250px;

            overflow: hidden;

            text-overflow: ellipsis;

            display: -webkit-box;

            -webkit-line-clamp: 2;　　//这个代表你要在几行显示省略号

            -webkit-box-orient: vertical;

原来是得加上　　word-break: break-all; 　　加上这个的话 在中英文下都可以正常使用

 注意：只兼容

Chrome内核浏览器

css文字两行或者几行显示省略号的更多相关文章

  1. 【css】 文本超出2行显示省略号

    首先,要知道css的三条属性. overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; // ...

  2. JS控制文字只显示两行，超出部分显示省略号

    由于使用css控制文字只显示多行,超出部分显示省略号,存在一定的兼容性问题,所以总结了一下网上一些大咖使用js实现控制行数的解决方案. 第一步:依次引入jquery.js+jquery.ellipsi ...

  3. css多行显示省略号

    首先说css多行显示省略号和单行文本省略号: 我们知道,单行显示省略号时,我们首先需要设置容器的宽度width:value(具体的值),然后强制文本在一行内显示,即white-spacing:nowr ...

  4. html文字两行后，就用省略号代替剩下的

    html文字两行后,就用省略号代替剩下的 一.总结 一句话总结: 实现原理很简单,将box的高度设置为行高的两倍,超出之后隐藏,这样就只有两行了,然后再用after属性绝对定位在第二行后面加几个点 . ...

  5. CSS 单行 多行文本溢出显示省略号

    单行文本 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 多行文本溢出显示省略号: <style type=&quo ...

  6. css--两行显示省略号兼容火狐浏览器

    css--两行显示省略号兼容火狐浏览器 正常写法: .ellipse1{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;} . ...

  7. CSS和JS实现文本溢出显示省略号

    本文记录实现文本溢出显示省略号的几种方式. 单行文本 三行CSS代码实现: overflow: hidden; // 文本溢出隐藏 text-overflow: ellipsis; // 显示省略号 ...

  8. CSS控制文本超出指定宽度显示省略号和文本不换行

    一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加 */ width:31em;/* 何问起 hovertree.com */ word ...

  9. 布局常见问题之css实现多行文本溢出显示省略号(…)全攻略

    省略号在ie中可以使用text-overflow:ellipsis了,但有很多的浏览器都需要固定宽度了,同时ff这些浏览器并不支持text-overflow:ellipsis设置了,下文来给各位整理一 ...

随机推荐

  1. MySQL中的JSON类型

    前言(废话) 昨天抽了点时间在网上搜列了一个开源项目,项目挺完整的,前后台分离还带有微信小程序,我Clone下代码,经过一番倒腾,嘿~还真就跑起来了.在这个过程中,体验了一把VUE项目工程细节,因为之 ...

  2. JAVA9之后废弃newInstance()方法

    JAVA9之后废弃newInstance()方法 根据JAVA11的API 我们可以看见反射中的newInstance()方法不推荐使用了,用 clazz.getDeclaredConstructor ...

  3. nginx配置访问xx.com跳转www.xx.com

    二.在nginx里面配置 rewrite 规则.打开 Nginx.conf 文件找到server配置段:[以下是我的server配置段] 禁止IP地址访问 server{ listen 80 defa ...

  4. vue 对 v-for 中数组进行过滤操作

    之前写angularjs的时候,filter是可以直接在ng-repeat中使用.但是到了vue好像这个不起作用. 具体解决办法: 加一个计算属性: computed:{ filterData: fu ...

  5. JavaScript: 自动类型转换-续

    在上一篇文章中,我们详细讲解了JavaScript中的自动类型转换,由于篇幅限制,没能覆盖到所有的转换规则,这次准备详细讲解一下. 上次我们提到了对象类型参与运算时转换规则: 1). 在逻辑环境中执行 ...

  6. MySQL Processlist--查看会话执行过的SQL情况

    对于MySQL 5.7版本,可以使用sys.session视图来查看会话最后一次执行的SQL: SELECT * FROM sys.session WHERE CONN_ID = \G 其中sys.s ...

  7. Trunk 实现跨交换机 VLAN 通信

    当网络中有多台交换机时,位于不同交换机上的相同VLAN的主机之间时如何通信的呢?我们使用Trunk实现跨交换机VLAN通信.还有以太网通道的操作哦. 实验拓扑 两台交换机直连,每台下面再连接两台VPC ...

  8. Activity知识点详解

    Activity知识点详解 一.什么是Activity 官方解释: The Activity class is a crucial component of an Android app, and t ...

  9. QA流程

    一.测试人员的介入时间 1.当产品经理与业务人员制定需求的时候,测试人员不宜介入: 2.当下一期的需求原型出来以后,这个时候就进入了需求评审.需求分析阶段,此时,测试人员应该介入: 3.当开发人员在编 ...

  10. LOJ#2343. 「JOI 2016 Final」集邮比赛 2

    题目地址 https://loj.ac/problem/2343 题解 首先处理出\(f[i]\)表示以当前位置开头(J,O,I)的合法方案数.这个显然可以\(O(n)\)处理出来.然后考虑在每个位置 ...