<!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实现单行”截取“的更多相关文章

  1. 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 ...

  2. 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  3. 纯CSS无hacks的跨游览器多列布局

    利用纯CSS创建一个等高多列的布局并不件易事,本教程将着重分析出现在多列布局的多个问题,然后为大家等来一个简单全游览器通吃的解决方法,不使用图片,脚本,CSS hacks并在最严格的XHTML 规范中 ...

  4. 谈谈一些有趣的CSS题目（十四）-- 纯 CSS 方式实现 CSS 动画的暂停与播放！

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  5. 使用纯CSS方案，解决垂直居中

    CSS是HTML元素的剪刀手,它极度的丰富了web页面的修饰.在众多CSS常见的样式需求中,有一奇葩式的存在[垂直居中],因为不管是从逻辑实现方面还是从正常需求量来讲,这都没理由让这个需求在实践过程中 ...

  6. 纯CSS实现垂直居中的7种方法

    今天申请博客通过了,给大家讲讲我所看到过的纯css实现垂直居中的各种方法.为什么要把它作为第一篇文章呢?因为这是我刚开始接触前端学到的对我最有用的知识,希望大家也可以从中获益! 在CSS中实现水平居中 ...

  7. 详解纯css实现瀑布流（multi-column多列及flex布局）

    瀑布流的布局自我感觉还是很吸引人的,最近又看到实现瀑布流这个做法,在这里记录下,特别的,感觉flex布局实现瀑布流还是有点懵的样子,不过现在就可以明白它的原理了 1.multi-column多列布局实 ...

  8. 从项目需求角度，使用纯CSS方案解决垂直居中

    CSS是HTML元素的剪刀手,它极度的丰富了web页面的修饰.在众多CSS常见的样式需求中,有一奇葩式的存在[垂直居中],因为不管是从逻辑实现方面还是从正常需求量来讲,这都没理由让这个需求在实践过程中 ...

  9. 纯css实现div中未知尺寸图片的垂直居中

    1.淘宝的方法 在曾经的"淘宝UED招聘"中有这样一道题目: “使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中.” 当然出题并不是 ...

随机推荐

  1. php -- 解决php连接sqlserver2005中文乱码问题（附详细解决方法）

    @_@~~ --php5.2 --phpstudy --apache --sqlserver2005 @_@~~问题描述 问题一:php连接sqlsever2005,输入中文,然后查询sqlserve ...

  2. 微信小程序缓存滑动距离，当页面浏览到一定位置，滑动其他页面后返回该页面记录之前的滑动距离

    15.微信小程序缓存滑动距离 我们在浏览页面的时候,然后左滑或者右滑到新的页面,等返回此页面,我们希望可以记录上次滑动的距离 虽然这个实现起来并不难,但是会遇到一些坑,因为scroll-view的组件 ...

  3. BZOJ 1032 JSOI 2007 祖码Zuma 区间DP

    题目大意:依照祖玛的玩法(任意选颜色),给出一段区间.问最少用多少个球可以把全部颜色块都消除. 思路:把输入数据依照连续的块处理.保存成颜色和数量.然后用这个来DP.我们知道,一个单独的块须要两个同样 ...

  4. windows系统上安装与使用Android NDK r8d(二)

    四.    在eclipse中集成c/c++开发环境    1. 装Eclipse的C/C++环境插件:CDT,这里选择在线安装.          首先登录http://www.eclipse.or ...

  5. CRUD using Spring MVC 4.0 RESTful Web Services and AngularJS

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...

  6. 【mybatis】在mybatis分页查询时，主表对关联表 一对多 分页查询怎么实现

    现在有这样一个需求: 1.积分商品分页查询 2.一个积分商品会有多张商品图片在商品图片表  1:n的关系 这样在积分商品分页查询的时候,想要顺便把每个积分商品对应的商品图片信息也带出来 实现如下: 1 ...

  7. 分享一个 markdown 编辑器 - Mditor

    只求极致 [ M ] arkdown + E [ ditor ] = Mditor Mditor 是一个简洁.易于集成.方便扩展.期望舒服的编写 markdown 的编辑器,仅此而已... 主页: h ...

  8. Pydoc 本地 HTML 形式查看

    Pydoc 本地 HTML 形式查看 我们在编写Python代码时,常常会去查询某些模块及函数的使用,会选择 dir() 及 help() 函数.或查看 CHM 格式的Python帮助文档.或查看Py ...

  9. ssh免密登录方法不生效？Authentication refused: bad ownership or modes for directory

    机器A通过ssh登录机器B,方法有两种: 1.密码方式 2.密钥方式: 两种方式同时开启的时候,优先使用密钥方式. 密钥登录方式的配置方法是,首先在登录机器B上创建文件authorized_keys( ...

  10. pidera安装node.js(树莓派)

    1. 下载node.js wget http://nodejs.org/dist/v0.10.5/node-v0.10.5-linux-arm-pi.tar.gz tar -xzvf node-v0. ...