css文字两行或者几行显示省略号
做这个省略的问题,突然发现显示省略号是有中英文区分的
我做两行的时候用的是以下代码,在是中文的情况下是么得问题,到了英文下发现不起作用了
width: 250px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; //这个代表你要在几行显示省略号
-webkit-box-orient: vertical;
原来是得加上 word-break: break-all; 加上这个的话 在中英文下都可以正常使用
注意:只兼容
Chrome内核浏览器
css文字两行或者几行显示省略号的更多相关文章
- 【css】 文本超出2行显示省略号
首先,要知道css的三条属性. overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; // ...
- JS控制文字只显示两行,超出部分显示省略号
由于使用css控制文字只显示多行,超出部分显示省略号,存在一定的兼容性问题,所以总结了一下网上一些大咖使用js实现控制行数的解决方案. 第一步:依次引入jquery.js+jquery.ellipsi ...
- css多行显示省略号
首先说css多行显示省略号和单行文本省略号: 我们知道,单行显示省略号时,我们首先需要设置容器的宽度width:value(具体的值),然后强制文本在一行内显示,即white-spacing:nowr ...
- html文字两行后,就用省略号代替剩下的
html文字两行后,就用省略号代替剩下的 一.总结 一句话总结: 实现原理很简单,将box的高度设置为行高的两倍,超出之后隐藏,这样就只有两行了,然后再用after属性绝对定位在第二行后面加几个点 . ...
- CSS 单行 多行文本溢出显示省略号
单行文本 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 多行文本溢出显示省略号: <style type=&quo ...
- css--两行显示省略号兼容火狐浏览器
css--两行显示省略号兼容火狐浏览器 正常写法: .ellipse1{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;} . ...
- CSS和JS实现文本溢出显示省略号
本文记录实现文本溢出显示省略号的几种方式. 单行文本 三行CSS代码实现: overflow: hidden; // 文本溢出隐藏 text-overflow: ellipsis; // 显示省略号 ...
- CSS控制文本超出指定宽度显示省略号和文本不换行
一般的文字截断(适用于内联与块): .text-overflow { display:block;/*内联对象需加 */ width:31em;/* 何问起 hovertree.com */ word ...
- 布局常见问题之css实现多行文本溢出显示省略号(…)全攻略
省略号在ie中可以使用text-overflow:ellipsis了,但有很多的浏览器都需要固定宽度了,同时ff这些浏览器并不支持text-overflow:ellipsis设置了,下文来给各位整理一 ...
随机推荐
- Java之路---Day03
2019-10-17-21:18:33 方法 定义格式: public static void 方法名称() { 方法体 } 完整格式: 修饰符 返回值类型 方法名称(参数类型 参数名称,... ...
- 要想获取select的值,使用ng-modle,否则无法获取select 的值
ng-bind是从$scope -> view的单向绑定 ng-modle是$scope <-> view的双向绑定 <form role="form" c ...
- 采用__call__ 实现装饰器模式
装饰器模式在实现中也是很常见的:比如手机贴膜,手机壳 都是为了给手机增加一些额外功能 增加耐操 装饰器模式的本质就是对对象二次包装,赋额外功能 __call__ __call__是python魔术方法 ...
- hexo更改主题
github+hexo搭建好个人博客之后,一般都挑选自己喜欢的主题.在这里为大家介绍一下比如何挑选主题以及如何修改主题. 主题选择: 1:知乎推荐 2:hexo官方 本地目录中打开git bash: ...
- 使用虹软ArcFac,java 离线SDK 进行人脸识别
公司项目需要人脸识别登录,需要支持离线识别,所以无法使用在线的人脸识别的API,于是使用到了离线SDK来对比识别人脸相识度. 获取人脸抓拍的图片需要对接设备,这里不做记录,假设我们已经获取到了人脸图片 ...
- Maven项目命名规范
Guide to naming conventions on groupId, artifactId and versiongroupId will identify your project uni ...
- index.jsp乱码问题的解决
我们在做java项目的时候,都会有个首页,一般就是index.jsp,然后在index.jsp中引入相关的文件,一般也是引入打包过后的相关资源文件. 当index.jsp上面的中文出现乱码的时候,就需 ...
- Linux命令——groups
groups用于查询当前用户的属组,没有参数.
- rsa公钥和私钥到底哪个才是用来加密,哪个用来解密?
本文转自:91博客:原文地址:http://www.9191boke.com/138589019.html 公钥和私钥在一些银行系统.第三方支付系统SDK中经常会遇到,刚接触公钥私钥的朋友们估计很难区 ...
- MySQL重置自增id
专注和简单一直是我的秘诀之一,简单的事情可能比复杂更难做到,你必须努力理清思路,从而使其便的简单:但这最终是值得的,因为你一旦做到了,便可创造奇迹. ---乔布斯 #删除所有数据 delete fr ...