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. 初学者--bootstrap(一)----在路上(1)

    bootstrap: 是目前最受欢迎的前端框架,并基于HTML.CSS.JavaScript 等,而且他是为了适应并兼容各个电子设备,是对媒体查询的封装. 1.什么是媒体查询   他 是响应式布局的方 ...

  2. 网络连接详细信息出现两个自动配置ipv4地址

    问题:网络连接详细信息出现两个自动配置ipv4地址,一个是有效地址,一个是无效地址. 解决办法:先将本地连接ip设置成自动获取,然后点击开始——>运行——>输入cmd,回车,进入命令行界面 ...

  3. AngularJS之代码风格36条建议【一】(九)

    前言 其实在新学一门知识时,我们应该注意下怎么书写代码更加规范,从开始就注意养成一个良好的习惯无论是对于bug的查找还是走人后别人熟悉代码都是非常好的,利人利己的事情何乐而不为呢,关于AngularJ ...

  4. Android APK签名

    一.为什么要签名? 开发Android的人这么多,完全有可能大家都把类名,包名起成了一个同样的名字,这时候如何区分?签名这时候就是起区分作用的. 由于开发商可能通过使用相同的Package Name来 ...

  5. EntityFramework 如何查看执行的 SQL 代码?

    在 VS 调试的时候,如果我们项目中使用的是 EntityFramework,查看 SQL 执行代码就不像 ADO.NET 那样直观了,我们需要设置下,可以参考下: How can I log the ...

  6. Visual Studio Code 智能提示文件

    Visual Studio Code 开发前端和node智能提示 visual studio code 是一个很好的编辑器,可以用来编写前端代码和nodejs. 我很喜欢使用VSC,现在流行框架对VS ...

  7. [c++] constexpr and literal class

    稀奇古怪的新特性,菜鸟在此啄上一啄. 1. When should literal classes be used in C++?   2. int i; // not constant const ...

  8. php对文本文件进行分页功能简单实现

    php对文本文件进行分页功能简单实现 <!DOCTYPE> <html> <head> <meta http-equiv="Content-type ...

  9. 相克军_Oracle体系_随堂笔记010-SCN

    1.SCN的意义?system change number     时间    先后.新旧 select dbms_flashback.get_system_change_number, SCN_TO ...

  10. JavaScript(Node.js)+ Selenium自动化测试

    Selenium is a browser automation library. Most often used for testing web-applications, Selenium may ...