text-overflow简单使用
text-overflow属性配合overflow才有效果，还记得把文字强制一行显示，如下代码：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>text-overflow</title>
<meta name="author" content="Guxingzhe" />
<style>
.test li {
margin-top: 10px;
} .test .clip label {
display: inline-block;
overflow: hidden;
width: 200px;
white-space: nowrap;
text-overflow: clip;
} .test .ellipsis label {display: inline-block;
overflow: hidden;
width: 200px;
white-space: nowrap;/* 强制在同一行内显示所有文本，直到文本结束或者遭遇br对象。 */
text-overflow: ellipsis;
}
</style>
</head>
<body>
<ul class="test">
<li class="clip"><strong>clip: 直接将溢出的文字裁剪</strong>
<label>测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字</label></li>
<li class="ellipsis"><strong>ellipsis: 将溢出的文字显示省略标记（...）</strong>
<label>测试用文字测试用文字测试用文字测试用文字测试用文字测试用文字</label></li>
</ul>
</body>
</html>
效果图：
text-overflow简单使用的更多相关文章
- Mac Sublime Text 2 简单使用
按 Ctrl+` 调出 console 粘贴以下代码到底部命令行并回车: import urllib2,os;pf='Package Control.sublime-package';ipp=subl ...
- Rails6.0 Beta版本1: Action Text的简单使用
主要功能是新增2个主要的框架Mailbox和action Text. 和2个重要的可扩展的升级: multiple databases support和parallel testing. Action ...
- Python学习笔记（二）使用Sublime Text编写简单的Python程序（）
一.使用Sublime Text编写Python 1.点击“文件” →”新建文件“ 2.点击”文件“→”保存“,并保存为.py文件 此时已经创建好Python文件了,接下来就可以编写Python程序了 ...
- application/x-www-form-urlencoded、application/json、multipart/form-data、text/xml简单总结
最近在数据传输时,一直不明白这四种的区别,查了很多资料,也还是感到很模糊,因此,简单总结一下,以后再完善 1.在GET方式传输数据中,这四种格式,后台都可以接收数据(原生的request.getPar ...
- Sublime Text 全程指引 by Lucida
作者:Lucida 微博:@peng_gong 豆瓣:@figure9 博客园:@figure9 原文链接:http://zh.lucida.me/blog/sublime-text-complete ...
- Sublime Text 全程指南
摘要(Abstract) 本文系统全面的介绍了 Sublime Text,旨在成为最优秀的 Sublime Text 中文教程. 更新记录 2014/09/27:完成初稿 2014/09/28: 更正 ...
- Sublime Text使用教程【转】
本文转载自:http://lucida.me/blog/sublime-text-complete-guide/ 摘要(Abstract) 本文系统全面的介绍了 Sublime Text,旨在成为最优 ...
- Sublime Text 教程
编辑器的选择(Editor Choices) 从初学编程到现在,我用过的编辑器有EditPlus.UltraEdit.Notepad++.Vim.TextMate和Sublime Text,如果让我从 ...
- [工具] Sublime Text 使用指南
http://bbs.it-home.org/thread-46291-1-1.html 摘要(Abstract) 更新记录 更正打开控制台的快捷键为Ctrl + ` 更正全局替换的快捷键为Ctrl ...
- Sublime Text指南
转自: http://lucida.me/blog/sublime-text-complete-guide/ 摘要(Abstract) 本文系统全面的介绍了Sublime Text,旨在成为最优秀的 ...
随机推荐
- Struts2属性驱动与模型驱动
为什么要使用属性驱动和模型驱动 struts2与struts很大的不同点在于,struts的execute方法提供了HttpServletRequest和HttpServletResponse方法在获 ...
- Comprehensive learning path – Data Science in Python深入学习路径-使用python数据中学习
http://blog.csdn.net/pipisorry/article/details/44245575 关于怎么学习python,并将python用于数据科学.数据分析.机器学习中的一篇非常好 ...
- EJB开发第一个无状态会话bean、开发EJBclient
开发第一个无状态会话bean EJB中的三中bean: 会话Bean(Session Bean) 负责与client交互,是编写业务逻辑的地方.在会话bean中能够通过JDBC直接操作数据库.但大多数 ...
- arclistsg独立单表模型文档列表
arclistsg独立单表模型文档列表 (DedeCMS > 5.3) 名称:arclistsg 功能:类似arclist标签,获取指定单表模型(例如:分类信息),指定栏目,指定排序及呈现样式的 ...
- iOS避免键盘遮挡输入方案
项目中经常会遇到这样的问题:一个tableView中有大量的textField,当点击屏幕底部的textfield时,由于键盘弹出挡住了textfield输入框里的内容,造成很差的用户体验,如下图,点 ...
- winform 获取当前项目所在的路径
代码: string curAppPath = System.IO.Directory.GetParent(System.Environment.CurrentDirectory).Parent.Fu ...
- myEclipse笔记（1）：优化配置
一．设置字体 Window->Preferences->General->Appearance->Colors and Fonts 在右侧找到”Aa Test Font”双击或 ...
- Codeforces Round #276 (Div. 1)
a. 给俩数, 求他俩之间二进制数中1最多的,有多个输出最小的: 贪心,从小到大加能加就加,最后可能碰到一个不能加了但是当前数比l小,那么就加上这个数,然后从大到小,能减就减,见到符合条件 #incl ...
- java三层模型与三层架构
http://zhidao.baidu.com/question/316273675.html?qbl=relate_question_4 持久层用来固化数据,如常说的DAO层,操作数据库将数据入库业 ...
- MySQL Left Join,Right Join
魂屁,东西发这里了关于Left Join,Right Join的 在讲MySQL的Join语法前还是先回顾一下联结的语法,呵呵,其实连我自己都忘得差不多了,那就大家一起温习吧(如果内容有错误或有疑问, ...