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. MySQL获取系统性能和状态

    #!/bin/ksh INTERVAL=5 PREFIX=$INTERVAL-sec-status touch /tmp/running RUNFILE=/tmp/running my -e 'sho ...

  2. Android 之 SharedPreferences

    1 简介 SharedPreferences是一种轻量级的数据存储方式,它可以用键值对的方式把简单数据类型(boolean.int.float.long和String)存储在应用程序的私有目录下(da ...

  3. 字符串数组越界bug（2）

    概述 数组下标从0開始,尽管从初学都已经知道,<陷阱与缺陷>重复强调,而在指尖运动中,就有那么几次不小心,让"精子"掉进这个"洞里"!其次,C语言字 ...

  4. USB描述符解析-->枚举.

    枚举可以理解为主机按不定的顺序向USB设备讨要设备信息,好给它分配资源,若枚举不成功,就放弃分配资源,免得浪费资源.一般都是使用中断传输方式通信. 常用的描述符有以下几种:01H.设备描述符  02H ...

  5. 配置NFS服务

    1. NFS配置,需要安装哪些包?nfs-utils  和 rpcbind2. 如果不开启rpcbind服务,就启动NFS,会怎么样?如果不开启rpcbind服务,会报错:rpc.nfsd: writ ...

  6. Swift 变量、常量、数据类型

    import Foundation print("HelloSwift") // 声明变量 var a = var b = a = b = // 常量 let c = a+b va ...

  7. javascript 操作 css Rule

    //add addCssRule('.bcd',{'color':'red','font-weight':'bold','font-size':'12px'},document.styleSheets ...

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

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

  9. MySQL 分区表 partition线上修改分区字段，后续进一步学习partition (1)

    公司线上在用partition,有一个表的分区字段错了,需要重建,结果发现没有办法像修改主键字段或者修改索引字段那样直接一条sql搞定.而是需要建临时表,有down time,所以去仔细看了文档,研究 ...

  10. Guava 15新特性介绍

    原文:http://www.javacodegeeks.com/2013/10/guava-15-new-features.html Guava 是众所周知的google出品的开源工具包,十分好用,本 ...