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. javadoc简介

    Javadoc是Sun公司提供的一个技术,它从程序源代码中抽取类.方法.成员等注释形成一个和源代码配套的API帮助文档.也就是说,只要在编写程序时以一套特定的标签作注释,在程序编写完成后,通过Java ...

  2. Android 字体设置

    Android 对中文字体支持很不好~~ 需要加入相应的字体库 (1)创建布局Layout //创建线性布局 LinearLayout linearLayout=newLinearLayout(thi ...

  3. 关于CCRect

    一直有一个误区,因为之前处理的公司引擎是屏幕坐标系 导致觉得CCRect的坐标起始值(x,y),习惯性的认为就是左上角的点. 但是,真正的x,y值,是跟x轴与y轴相对应的.

  4. 新手上路Tomcat 7.x和JDK的配置

    前言:这段时间又复习了JAVA以前做东西总是在IDE里面好多基础的东西都不知道,这次买了本书让自己重新认识下JAVA! 说明:以前装JDK时,我是和Mars老师学的那种开发JAVA应用程序进行配置的环 ...

  5. 大数据笔记09：大数据之Hadoop的HDFS使用

    1. HDFS使用: HDFS内部中提供了Shell接口,所以我们可以以命令行的形式操作HDFS

  6. Java基础知识强化39：StringBuffer类之StringBuffer的删除功能

    1. StringBuffer的删除功能: public StringBuffer  deleteCharAt(int index):删除指定位置的字符,并返回字符串缓冲区本身. public Str ...

  7. 前端 CSS 基础

    CSS概述 CSS全称:层叠样式表 (Cascading Style Sheets).CSS使得网站可以:创建文档内容清晰地独立于文档表现层. 样式表定义如何显示 HTML 元素,样式通常保存在外部的 ...

  8. 路由器密码破解工具 Hydra 7.5

    之前只在 Browser 中保存了路由管理密码,无奈升级时管理的密码丢失了,又不想重新设置,所以尝试破解登录密码. 使用破解工具 Hydra 7.5. # hydra -l username -x : ...

  9. Ajax (jquery)实现智能提示搜索框（in Django）

    搜索框输入搜索名字,从数据库中筛选名字, 如果有包含输入的字母的名字则以json格式返回并且显示在搜索框下:          html文件: <!DOCTYPE html> <ht ...

  10. ASP.Net用jQuery ajax实现页面局部刷新

    刚开始的时候使用asp的updatepanel控件实现局部刷新,而且在本地运行正确,但是部署到服务器上就变成整个页面全部刷新了.服务器用的是Windows server2000,本地机子上用的是win ...