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设置了,下文来给各位整理一 ...
随机推荐
- 2019三六零 java面试笔试题 (含面试题解析)
本人3年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.360等公司offer,岗位是Java后端开发,最终选择去了三六零. 面试了很多家公司,感觉大部分公司考察的点都差 ...
- vue插件(还真是第一次接触)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 调用Hybris API时遇到的错误消息Cannot find user with uid如何解决
今天工作中试图调用Commerce Cloud的user creation API用代码创建Hybris用户时,遇到下面这个错误消息. 我觉得很奇怪,因为backoffice里能查到这个id为jerr ...
- k8s资源清单基础
资源清单介绍 创建资源的方法 apiserver仅接收JSON格式的资源定义 yaml格式提供配置清单 apiserver可自动把yaml转换成json格式数据 资源清单五个一级字段 1.ap ...
- java-ExceptionHandler全局异常处理
springmvc配置文件: <!-- 定义全局异常处理,只有一个全局异常处理器起作用 --> <bean id="exceptionResolver" clas ...
- httpclient工具类,post请求发送json字符串参数,中文乱码处理
在使用httpclient发送post请求的时候,接收端中文乱码问题解决. 正文: 我们都知道,一般情况下使用post请求是不会出现中文乱码的.可是在使用httpclient发送post请求报文含中文 ...
- Linux安装和配置MySQL5.7【修改密码、修改字符集等配置】(5.7.18+版本也可参考,我是5.7.22)
本文是转载篇,这里是 原文原文原文. --------------------分割线------------------------------- 这下面内容讲述如何修改密码为简单密码(比如:1234 ...
- echarts 饼状图调节 label和labelLine的位置
原理 使用一个默认颜色为透明的,并且只显示labelLine的饼状图 然后通过调节这个透明的饼状图 以达到修改labelLine的位置 echarts地址 https://gallery.echart ...
- 利用ansible书写playbook搭建HAProxy+Keepalived+PXC负载均衡和高可用的PXC环境续
ansible.playbook.haproxy.keepalived.PXC haproxy+keepalived双主模式调度pxc集群 HAProxy介绍 反向代理服务器,支持双机热备支持虚拟主机 ...
- yum仓库的部署
https://segmentfault.com/a/1190000013968371 私有yum仓库在企业中的应用还是比较广泛,有方便.快捷.灵活等优势.如某公司安全部门不允许大批量的主机连接互联网 ...