多行显示情况

display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;

除了上述,还有其他的解决方法,但要兼容其他浏览器,还是比较麻烦的

可以通过设置高度来解决。

另外,刚刚测试了一种方法:

span{
width:112px;
height:57px;
position: relative;
line-height: 20px;
overflow: hidden;
display:block;
}
span:after{
content: "...";
position: absolute;
bottom: 0;
right: 0;
padding:0 17px 1px 0px;
width:27px;
height:20px;
color:#fff;
background-color:#333;}

通过设置伪类宽度和高度,可以遮挡省略号下面的字体。这种可以在IE浏览器下实现省略号

单行显示

一般设置下宽度

width:112px;
white-space:nowrap;
text-overflow:ellipsis;
overflow:hidden;

  

  

webkit浏览器下多行显示,有省略号效果的更多相关文章

  1. CSS移动端多行显示多余省略号

    /*css3 多行显示省略号,也可用于单行*/ .one-line { display: -webkit-box; overflow : hidden; text-overflow: ellipsis ...

  2. 仅支持webkit浏览器的多行内容超出显示省略号

    .box { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; ...

  3. Linux下命令行显示当前全路径方法

    /etc/profile 和 ~/.bashrc 或者直接在用户的.bash_profile中添加 export PS1='[\u@\h \W]\$' 然后执行source命令

  4. webkit浏览器下改变滚动条样式

    /*定义滚动条轨道 内阴影+圆角*/ ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); ba ...

  5. 利用css3实现超出文本指定行数与省略号效果

    <style> .text1 {/*单行*/ width:200px; overflow:hidden; text-overflow:ellipsis; -o-text-overflow: ...

  6. javascript超过容器后显示省略号效果(兼容一行或者多行)

    javascript超过容器后显示省略号效果       在实际的项目中,由于文字内容的长度不确定性和页面布局的固定性,难免会出现文字内容超过div(或其他标签,下同)区域的情况,此时比较好的做法就是 ...

  7. 清除webkit浏览器css设置滚动条

    主要有下面7个属性 ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的 ::-webkit-scrollbar-button 滚动条两端的按钮 ::-webkit-scrollb ...

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

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

  9. css文字两行或者几行显示省略号

    做这个省略的问题,突然发现显示省略号是有中英文区分的 我做两行的时候用的是以下代码,在是中文的情况下是么得问题,到了英文下发现不起作用了 width: 250px; overflow: hidden; ...

随机推荐

  1. Legal or Not HDU - 3342 (拓扑排序)

     注意点: 输入数据中可能有重复,需要进行处理! #include <stdio.h> #include <iostream> #include <cstring> ...

  2. SDUT-3377_数据结构实验之查找五:平方之哈希表

    数据结构实验之查找五:平方之哈希表 Time Limit: 400 ms Memory Limit: 65536 KiB Problem Description 给定的一组无重复数据的正整数,根据给定 ...

  3. POJ3889Fractal Streets

    Fractal Streets Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 445   Accepted: 162 Des ...

  4. FJWC2018

    晚上水到8:40,感觉药丸. 把电脑带回寝室,大半夜敲键盘…… bzoj5254红绿灯 泰迪每天都要通过一条路从家到学校,这条路的起点是泰迪家,终点则是学校. 这条路中间还有n个路口,从第i-1个路口 ...

  5. 如何用Excel打开CSV文件

    如何用Excel打开CSV文件? CSV文件一般是MS-SQL 导出查询数据的一种格式.格式结构是 用逗号分隔数据,如果直接用Excel打开那么数据不会自动分列.需要进行一定的设置.下面是设置过程. ...

  6. 为什么学习React Native三点原因

    React Native不到两岁,兼容Android平台刚刚1年.我学习React Native其实也就不到1年,不算长,也不算短. Paul Graham在文章中写过:大多数人真正注意到你的时候,不 ...

  7. SPSS分析技术:二阶聚类分析;为什么出现大学生“裸贷”业务,因为放贷者知道贷款者还不起

    SPSS分析技术:二阶聚类分析:为什么出现大学生"裸贷"业务,因为放贷者知道贷款者还不起 今天将介绍一种智能聚类法,二阶聚类法,在开始介绍之前,先解答很多人在后台提出的一个疑问:那 ...

  8. mysql自定义function 写递归查询子节点

    #存储文本信息表 CREATE TABLE WordInfoEntity( word_id ) PRIMARY KEY NOT NULL, # 主键ID UUID word_greda :正文文本 , ...

  9. HTML5环形音乐播放器

    在线演示 本地下载

  10. MaxCompute助力小影短视频走向全球化

    数字时代,中国已经成为世界互联网的中心,小影(海外版称作为VivaVideo,后简称VivaVideo)作为国内首批短视频出海企业,借助统一的云计算平台快速实现全球业务的线上部署,已经让每一行代码都获 ...