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简单使用的更多相关文章

  1. Mac Sublime Text 2 简单使用

    按 Ctrl+` 调出 console 粘贴以下代码到底部命令行并回车: import urllib2,os;pf='Package Control.sublime-package';ipp=subl ...

  2. Rails6.0 Beta版本1: Action Text的简单使用

    主要功能是新增2个主要的框架Mailbox和action Text. 和2个重要的可扩展的升级: multiple databases support和parallel testing. Action ...

  3. Python学习笔记（二）使用Sublime Text编写简单的Python程序（）

    一.使用Sublime Text编写Python 1.点击“文件” →”新建文件“ 2.点击”文件“→”保存“,并保存为.py文件 此时已经创建好Python文件了,接下来就可以编写Python程序了 ...

  4. application/x-www-form-urlencoded、application/json、multipart/form-data、text/xml简单总结

    最近在数据传输时,一直不明白这四种的区别,查了很多资料,也还是感到很模糊,因此,简单总结一下,以后再完善 1.在GET方式传输数据中,这四种格式,后台都可以接收数据(原生的request.getPar ...

  5. Sublime Text 全程指引 by Lucida

    作者:Lucida 微博:@peng_gong 豆瓣:@figure9 博客园:@figure9 原文链接:http://zh.lucida.me/blog/sublime-text-complete ...

  6. Sublime Text 全程指南

    摘要(Abstract) 本文系统全面的介绍了 Sublime Text,旨在成为最优秀的 Sublime Text 中文教程. 更新记录 2014/09/27:完成初稿 2014/09/28: 更正 ...

  7. Sublime Text使用教程【转】

    本文转载自:http://lucida.me/blog/sublime-text-complete-guide/ 摘要(Abstract) 本文系统全面的介绍了 Sublime Text,旨在成为最优 ...

  8. Sublime Text 教程

    编辑器的选择(Editor Choices) 从初学编程到现在,我用过的编辑器有EditPlus.UltraEdit.Notepad++.Vim.TextMate和Sublime Text,如果让我从 ...

  9. [工具] Sublime Text 使用指南

    http://bbs.it-home.org/thread-46291-1-1.html 摘要(Abstract) 更新记录 更正打开控制台的快捷键为Ctrl + ` 更正全局替换的快捷键为Ctrl ...

  10. Sublime Text指南

    转自: http://lucida.me/blog/sublime-text-complete-guide/  摘要(Abstract) 本文系统全面的介绍了Sublime Text,旨在成为最优秀的 ...

随机推荐

  1. How to get multi-touch working(Linux and Andriod)

    1.在hid-ids.h中加入vid pid           2.在hid-multitouch..c->mt_devices[] 中加入          {                ...

  2. Linux命令之文件与用户权限

    1.文件管理 在Linux里,任何软件和I/O设备都被视为文件.Linux中的文件名最大支持256个字符,分别可以用A-Z.a-z.0-9等字符来命名. 和Windows不同,Linux中文件是区分大 ...

  3. Android(工具・集成)

    ■ NDK Android从始(2009)至终是支持JNI的. 只不过一开始没有NDK.需要自己安装交叉编译器创建so,然后放到assert之类捆绑so发布. 有了NDK.有了什么? libc lib ...

  4. 在Silverlight中打开网页的几种方法

    HtmlPage.PopupWindow HtmlPopupWindowOptions option = new HtmlPopupWindowOptions(); option.Directorie ...

  5. （转）yum 和 apt-get 用法及区别

    原地址:http://www.cnblogs.com/adforce/archive/2013/04/12/3017577.html 一般来说著名的linux系统基本上分两大类:  1 RedHat系 ...

  6. poj2932 Coneology (扫描线)

    转载请注明出处: http://www.cnblogs.com/fraud/          ——by fraud Coneology Time Limit: 5000MS   Memory Lim ...

  7. 第10章DOM笔记

    第十章 DOM 一 Node类型 共有12种节点类型,每个节点都有nodeType属性,用于表明节点类型,nodename 表示标签名称 nodeValue始终为null 1.操作节点 a)  app ...

  8. shopnc B2B2C商城 Nginx下开启伪静态

    B2B2C商城 Nginx下开启伪静态,伪静态开启后,对系统的SEO极为有利,可以最大限度让商城页面被搜索引擎抓取,但在实际安装中,很多客户在这块都会遇到各种各样的问题. 1. 编辑商城配置文件(da ...

  9. quartz spring 时间配置

    关于时间配置, 1前面带0和不带0的区别是???   (开始时间,带0以整点整分整秒开始,不带的以启动时间定时循环??) 比如 0 7/37 * * * ?  表示每个小时的第7分钟开始执行,然后隔三 ...

  10. java并发编程_基本模块构建

    读<java并发编程实战>第五章学习记录:该章节主要介绍一些并发编程中一些基本的构建模块.如并发容器和并发工具类(闭锁和栅栏)以及一些需要注意的情况 并发容器 1. ConcurrentH ...