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. HBase总结（十二）Java API 与HBase交互实例

    HBase提供了Java Api的訪问接口,掌握这个就跟Java应用使用RDBMS时须要JDBC一样重要 import java.io.IOException; import org.apache.h ...

  2. js过滤空格

    点击查看效果 点击进入下载 <html> <head> <title> 过滤空格 </title> <SCRIPT LANGUAGE=" ...

  3. winrar3.7-winrar4.0的注冊码

    首先新建记事本文件(txt文件),把下面红色代码复制进去,然后将文件另存为以 rarreg.key 为文件名称的文件(当然因为设置的不同,可能出现你保存后的文件为 rarreg.key.txt 没关系 ...

  4. Java调用天气Webservice的小应用

    废话不多说,直接贴代码: CityReq.java package com.weather; import javax.xml.bind.annotation.XmlElement; import j ...

  5. 【反射】Reflect 介绍 示例

    介绍 JAVA反射机制是指:在运行状态中,对于任意一个[类],都能够知道这个类的所有属性和方法:对于任意一个[对象],都能够调用它的所有属性和方法:这种[动态]获取类中的信息以及动态调用对象的成员的功 ...

  6. Android -------- eclipse平台上的单元测试框架

    eclipse平台上单元测试框架 继承android.test.AndroidTestCase类 清单文件中设置 设置指令集,与application标签同级 <instrumentation ...

  7. scala学习笔记——特质

    一个类扩展自一个或多个特质,以便使用这些特质提供的服务.特质可能会要求使用它的类支持某个特定的特性.不过和java不同,Scala特质可以给出这些特性的缺省实现. 特质的特性: 类可以实现任意数量的特 ...

  8. static静态类与非静态类的区别

    static静态类与非静态类的区别 1.在非静态类中可以有实例成员也可以有静态成员 2.在调用的时候需要使用对像名.实例成员调用(先要实例化,如person ps=new person();  ps. ...

  9. IDirect3DDevice9::Clear

    在绘制每一帧图形前都要先清空视区,即清空渲染目标表面上的视区矩形的内容:颜色缓冲区.深度缓冲区或者模板缓冲区. HRESULT Clear(  [in]  DWORD Count,           ...

  10. 移动平台中 meta 标签的使用

    一.meta 标签分两大部分:HTTP 标题信息(http-equiv)和页面描述信息(name). 1.http-equiv 属性的 Content-Type 值(显示字符集的设定) 说明:设定页面 ...