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

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

            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. python基础知识(二)

    python基础知识(二) 字符串格式化 ​ 格式: % 类型 ---- > ' %类型 ' %(数据) %s 字符串 ​ print(' %s is boy'%('tom')) ----> ...

  2. vue-cli 移动端项目如何在手机上调试预览

    这里分享下如何在webpack工具构建下的vue项目,在手机端调试和预览,言归正传. 1.电脑和手机连接到同一个WIFI a.台式电脑和手机同时链接一个路由器,使用同一个wifi: b.笔记本也可以直 ...

  3. day 08作业 预科

    有如下值集合 [11,22,33,44,55,66,77,88,99,90...],将所有大于 66 的值保存至字典的第一个key中,将小于 66 的值保存至第二个key的值中 lt=[11,22,3 ...

  4. php无限分类方法类

    创建数据库以及表 CREATE DATABASE `sortclass`DEFAULT CHARSET utf8; CREATE TABLE IF NOT EXISTS `class` ( `cid` ...

  5. php 文件包含 include、include_once、require、require_once

    简言之,include某文件:把某文件的代码粘过来,如果该文件不存在,也继续执行下面的代码,带_once的是看看之前引用过没,引用过就不引用了(_once这行代码的心里活动:“之后引用过没有我不关心, ...

  6. 【异常】Caused by: java.lang.IllegalStateException: RequestParam.value() was empty on parameter 0

    使用@RequestParam注解,必须指定名称如: @RequestParam("date")String date

  7. 前端JS

    目录 1.javascript介绍 1.1Web前端有三层: 1.2其中JavaScript基础又分为三个部分: 1.3JavaScript入门易学性 1.4JavaScript的组成 1.5Java ...

  8. X.509

    参考:https://baike.baidu.com/item/X.509/2817050?fr=aladdin 标题:X.509  百度百科 在密码术中,X.509是定义公用密钥证书格式的标准. X ...

  9. P4560 [IOI2014]Wall 砖墙

    题目描述 给定一个长度为 nn且初始值全为 00的序列.你需要支持以下两种操作: Add L, R, hL,R,h:将序列 [L, R][L,R]内所有值小于 hh的元素都赋为 hh,此时不改变高度大 ...

  10. vue响应式原理解析

    # Vue响应式原理解析 首先定义了四个核心的js文件 - 1. observer.js 观察者函数,用来设置data的get和set函数,并且把watcher存放在dep中 - 2. watcher ...