webkit浏览器下多行显示,有省略号效果
多行显示情况
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浏览器下多行显示,有省略号效果的更多相关文章
- CSS移动端多行显示多余省略号
/*css3 多行显示省略号,也可用于单行*/ .one-line { display: -webkit-box; overflow : hidden; text-overflow: ellipsis ...
- 仅支持webkit浏览器的多行内容超出显示省略号
.box { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; ...
- Linux下命令行显示当前全路径方法
/etc/profile 和 ~/.bashrc 或者直接在用户的.bash_profile中添加 export PS1='[\u@\h \W]\$' 然后执行source命令
- webkit浏览器下改变滚动条样式
/*定义滚动条轨道 内阴影+圆角*/ ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); ba ...
- 利用css3实现超出文本指定行数与省略号效果
<style> .text1 {/*单行*/ width:200px; overflow:hidden; text-overflow:ellipsis; -o-text-overflow: ...
- javascript超过容器后显示省略号效果(兼容一行或者多行)
javascript超过容器后显示省略号效果 在实际的项目中,由于文字内容的长度不确定性和页面布局的固定性,难免会出现文字内容超过div(或其他标签,下同)区域的情况,此时比较好的做法就是 ...
- 清除webkit浏览器css设置滚动条
主要有下面7个属性 ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的 ::-webkit-scrollbar-button 滚动条两端的按钮 ::-webkit-scrollb ...
- css--两行显示省略号兼容火狐浏览器
css--两行显示省略号兼容火狐浏览器 正常写法: .ellipse1{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;} . ...
- css文字两行或者几行显示省略号
做这个省略的问题,突然发现显示省略号是有中英文区分的 我做两行的时候用的是以下代码,在是中文的情况下是么得问题,到了英文下发现不起作用了 width: 250px; overflow: hidden; ...
随机推荐
- HR招聘_(三)_招聘方法论(招聘途径及流程)
1.招聘途径 网络招聘:企业官网,招聘网站,微信,论坛等. 校园招聘:学校信息栏海报,学校组织招聘会,校企业联合专场. 现场招聘会: 专场招聘会,人才市场招聘会. 猎头公司:猎头(年薪高于350K), ...
- hdu 4027 Can you answer these queries? (区间线段树,区间数开方与求和,经典题目)
Can you answer these queries? Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65768/65768 K ...
- typescript+react+antd基础环境搭建
typescript+react+antd基础环境搭建(包含样式定制) tsconfig.json 配置 // 具体配置可以看上面的链接 这里module moduleResolution的配置都会影 ...
- Codeforces 414A
题目链接 首先考虑无解的情况: n / 2 > k 或者 n==1 且 k != 0 (因为两个数的最大公约数最小为1) 然后因为有 n / 2 组(把 a[i] 和 a[i+1] 看成一组), ...
- Path Sum 深度搜索
Given a binary tree and a sum, determine if the tree has a root-to-leaf path such that adding up all ...
- 【JZOJ4847】【NOIP2016提高A组集训第5场11.2】夕阳
题目描述 "我有个愿望,我希望在灿烂千阳时遇见你." 这是个有n个点的世界,有m条无向边连接着这n个点,但是不保证点之间能够互相到达. "这个世界的夕阳,只在奇数长的简单 ...
- 两种获取python版本的方法
方法1:查看python版本 import sys print("当前python版本",sys.version) 方法2:cmd框中查看的两种方式
- 笔记:VSCODE 在 WSL 开发时不显示代码差异问题
笔记:VSCODE 在 WSL 开发时不显示代码差异问题 这个好像和 VSCODE 关系不大,主要是因为 WSL 里使用了软链接接,导致无法显示差异. 因为毕竟是软链接,所以在系统文件中会导致无法识别 ...
- oracle使用profile管理用户口令
概述:profile是口令限制.资源限制的命令集合,当建立数据时,oracle会自动建立名称为default的profile,当建立用户没有指定profile选项,那么oracle就会将default ...
- Android BroadcastReceiver 简介
Android BroadcastReceiver 简介 在 Android 中使用 Activity, Service, Broadcast, BroadcastReceiver 活动(A ...