CCS3属性之text-overflow:ellipsis;的用法和注意之处

语法:

text-overflow:clip | ellipsis

默认值:clip

适用于:所有元素

clip: 当对象内文本溢出时不显示省略标记(...),而是将溢出的部分裁切掉。 
ellipsis: 当对象内文本溢出时显示省略标记(...)。

更多参考:http://hovertree.com/h/bjaf/pr_text-overflow.htm

在使用的时候,有时候发现不会出现省略标记效果,经过测试发现,使用ellipsis的时候,必须配合overflow:hidden; white-space:nowrap; width:200px;这三个样式共同使用才会有效果,示例代码:

<style type="text/css">
.test{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:360px;}
</style> <div class="test">欢迎光临<a href="http://hovertree.com/">何问起</a>! hovertree.com css3实现文本溢出显示省略号。<a href="http://hovertree.net/">Midi下载</a></div>

查看效果:http://hovertree.com/h/bjaf/1hg11eg4.htm

练习题:http://hovertree.com/tiku/bjaf/curs4a42.htm

web前端汇总:http://www.cnblogs.com/jihua/p/webfront.html

CSS3文本溢出显示省略号的更多相关文章

  1. CSS换行文本溢出显示省略号

    现代浏览器中使用css可以实现文本溢出,使用 text-overflow: ellipsis;在有些场景下没有效果,这个时候你需要检查应用的场景是是否是块元素,是否有确切的width. 如果是行内元素 ...

  2. CSS文本溢出显示省略号

    项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英雄指教. 单行 语法 ...

  3. CSS单行文本溢出显示省略号

    此为转载,原文地址 项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英 ...

  4. CSS和JS实现文本溢出显示省略号

    本文记录实现文本溢出显示省略号的几种方式. 单行文本 三行CSS代码实现: overflow: hidden; // 文本溢出隐藏 text-overflow: ellipsis; // 显示省略号 ...

  5. css实现文本溢出显示省略号

    看到很多网站上的文章列表只显示一部分,之后就是一个阅读全文链接,或者是以一个省略号结尾.今天就说说单行文本,多行文本溢出时怎么显示省略号? 单行 overflow: hidden; white-spa ...

  6. 长文本溢出显示省略号(…) text-overflow: ellipsis

    text-overflow 属性规定当文本溢出包含元素时发生的事情. 默认值: clip 继承性: no 版本: CSS3 JavaScript 语法: object .style.textOverf ...

  7. ZH奶酪:HTML元素文本溢出显示省略号(...)

    一 单行文本 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow 属性规定当内容溢出元素框时发生的事情. ...

  8. 文本溢出显示省略号,CSS未加载时a标签仍可用处理方法

    一.文本溢出打点 (1)单行文本 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; (2)多行文本 overflow : h ...

  9. WEB-CSS实现单行(多行)文本溢出显示省略号

    //单行文本溢出部分隐藏显示省略号...overflow: hidden; text-overflow:ellipsis; white-space: nowrap; /** n 行文本溢出部分隐藏显示 ...

随机推荐

  1. 浅谈JavaScript之原型

    上一篇谈new关键字也是给这一篇写关于原型的文章买个伏笔,我对原型的理解可能会有偏差,如有错误,望指正一定修改,望各位道友如果想真正的理解原型的概念一定要再看完各方言论再回归教材. 言归正传谈原型,首 ...

  2. 浅谈HTML5单页面架构(一)——requirejs + angular + angular-route

    心血来潮,打算结合实际开发的经验,浅谈一下HTML5单页面App或网页的架构. 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又要数单页面架构体验 ...

  3. 免费获取WP之类的开发者权限或免费使用Azure 2015-10-19

    上一次弄wp真机调试的时候,卡住了,这里讲一下怎么解决(http://www.cnblogs.com/dunitian/p/4870959.html) 进这个网址注册一下:https://www.dr ...

  4. 由ArcMap属性字段自增引出字段计算器使用Python的技巧

    1.前言       前些日子有人问我ArcMap中要让某个字段的值实现自增有什么方法?我首先想到像SQL Server中对于数值型字段可以设置自增.所以我打开ArcCatalog查看发现只提供默认值 ...

  5. .NET足球赛事资料数据库平台SmartLottery开源发布——全球足球联赛应有尽有

            本博客所有文章分类的总目录:[总目录]本博客博文总目录-实时更新 开源C#彩票数据资料库系列文章总目录:[目录]C#搭建足球赛事资料库与预测平台与彩票数据分析目录 前2个月,我的系列文 ...

  6. 谈谈基于OAuth 2.0的第三方认证 [上篇]

    对于目前大部分Web应用来说,用户认证基本上都由应用自身来完成.具体来说,Web应用利用自身存储的用户凭证(基本上是用户名/密码)与用户提供的凭证进行比较进而确认其真实身份.但是这种由Web应用全权负 ...

  7. 窥探Swift之类的继承与类的访问权限

    上一篇博客<窥探Swift之别具一格的Struct和Class>的博客可谓是给Swift中的类开了个头.关于类的内容还有很多,今天就来搞一下类中的继承以及类的访问权限.说到类的继承,接触过 ...

  8. MySQL数据库实例参数对比脚本

    如何对比两个MySQL实例的参数情况,生产中常会有这样的需求,最近写了个python脚本,可基本实现该需求. 脚本 #!/usr/bin/python import MySQLdb,sys def f ...

  9. 利用Shell脚本将MySQL表中的数据转化为json格式

    脚本如下: #!/bin/bash mysql -s -phello test >.log <<EOF desc t1; EOF lines="concat_ws(',', ...

  10. 如何使用免费PDF控件从PDF文档中提取文本和图片

             如何使用免费PDF控件从PDF文档中提取文本和图片 概要 现在手头的项目有一个需求是从PDF文档中提取文本和图片,我以前也使用过像iTextSharp, PDFBox 这些免费的PD ...