纯css实现单行”截取“
2024-08-31 03:07:13
<!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
最新文章
- Golang gopath
- 【Beta阶段】发布说明
- Hash索引和B树索引
- HDU5763 another meaning -(KMP+DP)
- 为什么使用 React? Edit on GitHub
- linux_vim_快捷键
- spring的value,null标签
- eclispe 导入android或者java项目出现中文乱码
- C++各种优化
- CodeForces - 864C-Bus-(模拟加油站问题)
- 涂抹mysql笔记-mysql字符集
- Knockout.js快速学习笔记
- 【AI】微软人工智能学习笔记(二)
- 广播小案例-监听系统网络状态 --Android开发
- set的三种遍历方式-----不能用for循环遍历(无序)
- spring boot 事务支持
- liunx trac 安装记录
- .NET程序运行过程
- Crontab &#39;2>;&;1 &;&#39; 含义
- iBatis的基本配置+CRUD操作