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设置了,下文来给各位整理一 ...
随机推荐
- zookeeper介绍(4)zookeeper的完整分布式
参考: zookeeper的单机和伪分布式教程请参考:zookeeper介绍(1)zookeeper介绍与安装 Zookeeper的完整分布式集群搭建: 准备好三台centos主机:(在这我使用的是z ...
- 解决加载WEB页面时,由于JS文件引用过多影响页面打开速度的问题
1.一般做法 一般我们会把所有的<script>元素都应该放在页面的<head>标签里,但由于是顺序加载,因此只有当所有JavaScript代码都被依次下载.解析和执行完之后, ...
- Java入门(二)——泛型
如果你写过前端,可能会经常写一下关于变量类型的判断,比如:typeof fn === 'function'之类的代码.因为JavaScript作为一门弱类型语言,类型的判断往往需要开发人员自己去检查. ...
- MySQL/MariaDB数据库的PROXY实现读写分离
MySQL/MariaDB数据库的PROXY实现读写分离 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.ProxySQL概述 1>.各家互联网公司读写分离的解决方案 m ...
- Python的插件化开发概述
Python的插件化开发概述 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.插件化开发 动态导入: 运行时,根据用户需求(提供字符串),找到模块的资源动态加载起来. 1> ...
- mongodb 安装pymongo 驱动
下载驱动包: https://pypi.org/project/pymongo/ 解压: tar zxvf pymongo-3.8.0.tar.gz 安装: python setup.py i ...
- linux卸载mysql误删mysql.pm
操作步骤如下 linux卸载mysql:yum remove mysql 查找mysql所有的文件并删除: 查找:find / -name mysql 删除:rm -rf xxx 误操作删除mysql ...
- js 预解析以及变量的提升
js在执行之前会进行预解析. 什么叫预解析? 预:提前 解析:编译 预解析通俗的说:js在执行代码之前会读取js代码,会将变量声明提前. 变量声明包含什么?1.var 声明 2.函数的显示声明. 提前 ...
- 2019牛客多校第二场BEddy Walker 2——BM递推
题意 从数字 $0$ 除法,每次向前走 $i$ 步,$i$ 是 $1 \sim K$ 中等概率随机的一个数,也就是说概率都是 $\frac{1}{K}$.求落在过数字 $N$ 额概率,$N=-1$ 表 ...
- windows认证过程
NTLM简介: NTLM使用在Windows NT和Windows 2000 Server(or later)工作组环境中(Kerberos用在域模式下).在AD域环境中,如果需要认证Windows ...