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. cocos2dx 利用CCOrbitCamera实现扑克牌翻牌效果

    [cpp] view plaincopy #include "HelloWorldScene.h" #include "SimpleAudioEngine.h" ...

  2. Android 中文 API (40) —— RatingBar

    Android 中文 API (40) —— RatingBar 前言 本章内容是 android.widget.RatingBar,译为"评分条",版本为Android 2.2 ...

  3. Intellj IDEA 启动参数调优

    (修改前记得备份) 修改IntellJ/bin/idea.exe.vmoptions修改成 -Xms512m -Xmx512m -Xmn164m -XX:MaxPermSize=250m -XX:Re ...

  4. C#委托的回调机制

    代码如下: public partial class FrmMain : Form { // 定义回调使用关键字 delegate(回调是委托的一种应用,其本质就是委托) private delega ...

  5. Mysql查看连接端口及版本

    C:\Users\Administrator>mysql -uroot -pEnter password: *****Welcome to the MySQL monitor. Commands ...

  6. 重学《C#高级编程》（泛型与数组）

    前段时间工作比较忙,就没有写随笔了,现在继续. 前两天重新看了泛型和数组两章,简单说下我自己的收获吧 泛型 我们知道数组是一种批量的数据格式,而泛型其实就是一种自定义的批量数据格式,当数组和C#现有的 ...

  7. C复习手记(Day3)

    C预处理器 C 预处理器不是编译器的组成部分,但是它是编译过程中一个单独的步骤.简言之,C 预处理器只不过是一个文本替换工具而已,它们会指示编译器在实际编译之前完成所需的预处理.我们将把 C 预处理器 ...

  8. Android --------- 命名规范

    工程 软件名称,最好是英文首字母大写:如MobileSafe. 包 企业单位网址的倒序+软件名称:如com.baidu.mobilesafe. 类 类中分为:(头字母小写,其他每个单子首字母大写) 1 ...

  9. O、Ω、Θ表示

    转载,原网址为:http://book.2cto.com/201211/8127.html 对于任何数学函数,这三个记号可以用来度量其“渐近表现”,即当趋于无穷大时的阶的情况,这是算法分析中非常重要的 ...

  10. 过滤器压缩全站jsp

    过滤器: public class Gzip implements Filter { public void destroy() {} public void doFilter(ServletRequ ...