纯css实现单行”截取“
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯css实现单行”截取“</title>
<style type="text/css">
*{ font-size:14px;} .zxx_text_overflow_4{width:24em; height:1.3em; overflow:hidden; zoom:1;}
.zxx_text_overflow_4 .text_con{float:left; height:1.3em; margin-right:3em; overflow:hidden;}
.zxx_text_overflow_4 .text_dotted{width:3em; height:1.31em; float:right; margin-top:-1.3em;} </style>
</head>
<body> <div class="zxx_text_overflow_4">
<div class="text_con">这是一段比较长的文字,用来测试是否文字溢出时会用省略号显示。</div>
<div class="text_dotted">…</div>
</div>
<div style="background:red; height:40px;">嘎嘎嘎</div> </body>
</html>
简要说明:当文字内容足够长 时就把隐藏在上面的省略号层给挤下来了。关键就是点点点所在div层的高度的绝对值要比其margin的绝对值大那么一点点。 如果您不习惯用em做单位,直接换作px就可以了,效果是一样的。
原文地址:http://www.zhangxinxu.com/wordpress/?p=230
纯css实现单行”截取“的更多相关文章
- Expression构建DataTable to Entity 映射委托 sqlserver 数据库里面金额类型为什么不建议用float,实例告诉你为什么不能。 sql server 多行数据合并成一列 C# 字符串大写转小写,小写转大写,数字保留,其他除外 从0开始用U盘制作启动盘装Windows10系统(联想R720笔记本)并永久激活方法 纯CSS打造淘宝导航菜单栏 C# Winform
Expression构建DataTable to Entity 映射委托 1 namespace Echofool.Utility.Common { 2 using System; 3 using ...
- 谈谈一些有趣的CSS题目(八)-- 纯CSS的导航栏Tab切换方案
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 纯CSS无hacks的跨游览器多列布局
利用纯CSS创建一个等高多列的布局并不件易事,本教程将着重分析出现在多列布局的多个问题,然后为大家等来一个简单全游览器通吃的解决方法,不使用图片,脚本,CSS hacks并在最严格的XHTML 规范中 ...
- 谈谈一些有趣的CSS题目(十四)-- 纯 CSS 方式实现 CSS 动画的暂停与播放!
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 使用纯CSS方案,解决垂直居中
CSS是HTML元素的剪刀手,它极度的丰富了web页面的修饰.在众多CSS常见的样式需求中,有一奇葩式的存在[垂直居中],因为不管是从逻辑实现方面还是从正常需求量来讲,这都没理由让这个需求在实践过程中 ...
- 纯CSS实现垂直居中的7种方法
今天申请博客通过了,给大家讲讲我所看到过的纯css实现垂直居中的各种方法.为什么要把它作为第一篇文章呢?因为这是我刚开始接触前端学到的对我最有用的知识,希望大家也可以从中获益! 在CSS中实现水平居中 ...
- 详解纯css实现瀑布流(multi-column多列及flex布局)
瀑布流的布局自我感觉还是很吸引人的,最近又看到实现瀑布流这个做法,在这里记录下,特别的,感觉flex布局实现瀑布流还是有点懵的样子,不过现在就可以明白它的原理了 1.multi-column多列布局实 ...
- 从项目需求角度,使用纯CSS方案解决垂直居中
CSS是HTML元素的剪刀手,它极度的丰富了web页面的修饰.在众多CSS常见的样式需求中,有一奇葩式的存在[垂直居中],因为不管是从逻辑实现方面还是从正常需求量来讲,这都没理由让这个需求在实践过程中 ...
- 纯css实现div中未知尺寸图片的垂直居中
1.淘宝的方法 在曾经的"淘宝UED招聘"中有这样一道题目: “使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中.” 当然出题并不是 ...
随机推荐
- 【BZOJ】1042: [HAOI2008]硬币购物
1042: [HAOI2008]硬币购物 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 3307 Solved: 2075[Submit][Stat ...
- 卡特兰数 codevs 1086 栈
1086 栈 2003年NOIP全国联赛普及组 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题解 查看运行结果 题目描述 Description ...
- JDK源码(1.7) -- java.util.Deque<E>
java.util.Deque<E> 源码分析(JDK1.7) -------------------------------------------------------------- ...
- Shell基础学习(四) echo命令
1.显示普通的字符串 echo "boring" 2.显示转义字符 echo "\"It is a test!\""; 3.read 命令从 ...
- Testcase的编写
‘ID’用于记录某一功能: ‘标题’用于表示某一Case:(一个功能有多个Case) ‘优先级’标记Case的重要等级,运行顺序 ‘测试步骤’记录测试流程 1.Given:条件 2.And:进行某些前 ...
- Wifi模块的工作原理
http://www.wifitop1.com/news/content-98.html 在无线网络领域里面,无线wifi是最火的名词.对于串口wifi模块的工作是什么呢?串口wifi模块又有什么功能 ...
- mysql localhost登录和tcp/ip登录 strace
http://blog.itpub.net/15480802/viewspace-1755100/
- Git本地仓库与Github远程仓库关联
如果你已经在本地创建了一个Git仓库,又想在GitHub创建一个Git仓库,并且让这两个仓库进行远程同步,那就需要用到SSH Key,github拿到了你的公钥就会知道内容是你推送的. SSH Key ...
- Netty框架
Netty框架新版本号:3.0.2.GA,于2008年11月19日公布.Netty项目致力于提供一个异步的.事件驱动的网络应用框架和工具,用于高速开发可维护的.高性能的.高扩展性的server和cli ...
- Facebook产品的开发流程
[编者注]王淮是Facebook第二位中国籍工程师,也是第一位中国籍研发经理,他一手开创了Facebook的支付安全和客服工具领域.2011年他离开Facebook,回国成为天使投资人,希望用自己在F ...