CSS3 text-overflow

作用

文本溢出时发生的事情。


用法

text-overflow: clip | ellipsis | string;

clip:修剪文本

ellipsis:显示省略号代表修剪文本

string:给定字符串代表修剪文本


兼容性

所有主流浏览器均兼容


搭配使用

overflow:hidden;（隐藏溢出）

white-space:nowrap;（规定段落中文本不换行）


Demo

http://codepen.io/makaiqian/pen/BmFfu


注意

  1. 只能运用于单行
  2. 多行可以通过jQuery实现。

原理：根据判定有没有越界，让超出部分用…代替。

时间： 2024-08-22 11:32:14

CSS3 text-overflow的相关文章

CSS3之阴影效果box-shadow与text-shadow

 本篇,我们要讲的是CSS3中经常被使用来开发页面模糊阴影效果的box-shadow属性和text-shadow属性. 在前端开发过程中,我们常常会看见这种效果:  <!DOCTYPE html>      <html lang="en">      <head>          <meta charset="UTF-8">          <title>Shadow</title>    

css3.0的新属性的参考列表

文中的图表让我们对于每一个浏览器对css3.0新属性的支持情况一目了然,通过升级firfox.Chrome.Safari.Opera浏览器的版本是可以做到支持css3.0属性的,但ie浏览器的升级版本还是无法很好的支持css3.0的新属性! zenelements.com网站对部分css3.0新属性进行了整理总结,并对相应新属性在各个浏览器的支持情况做了一个图表 ,让我们对于每一个浏览器对css3.0新属性的支持情况一目了然! 从以下列表可以看出,通过升级firfox.Chrome.Safari

50 个最佳 CSS3 教程大放送

本文收集了2011年最热门的50个CSS3教程,读者可根据这些教程轻松实现网页的设计.  1. Original Hover Effects with CSS3  本教程讲述应用CSS3实现风格迥异的鼠标悬停效果. 2. CSS3 Transitions Without Using :hover  本教程讲述应用CSS3实现动态变换效果. 3. How to Create a Beautiful Icon with CSS3  本教程讲述应用CSS3创建文档图标. 4. Creative CSS

表格美化之按鼠标按钮把文本框里的值输入到表格

效果:往文本框内输入文字,按按钮可以把文本框内的文字输入到上边的单元格内 代码: Html代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> New Document </TITLE><META NAME="Generator" CONTENT="EditPlus"

jQuery 和 CSS 的文本特效插件集锦_jquery

Jumble Text Effect Plugins Demo||Download Vticker – Vertical News Ticker With JQuery Plugin Demo||Download JQuery TE – Text Editor With JQuery Plugin Demo||Download Squishy – JQuery Plugin For Fitting Text Exactly To Its Container Demo||Download Boot

Internet Explorer 的创新

IE 曾是 web 创新的先驱,但最近几年因为对 web 标准的支持落后于其他浏览器以及低版本 IE 的各种 bug 而被人诟病.雅虎的 Nicholas C. Zakas 带我们回顾了 IE 在 web 发展过程中扮演的辉煌角色,让我们能以一个更客观的眼光来看待 IE.看完这篇文章,也许大家都会对 IE 浏览器有一定的改观,这也是我翻译这篇文章的目的. 译文 在 Internet Explorer 成为大家都恨之入骨的浏览器的很久以前,它曾是整个互联网的创新驱动力.有时候我们很难记得那些在 I

最后80分，请帮我改一段JS代码，在线等

问题描述 我在网上下了一段JS代码,是导航条,我把代码存在HTML里就好用,存在.NET里就不好用,请各位帮帮忙,帮我改一下,谢谢了.正确的如图:错误的图片,也就是我放到.NET里就这样: 解决方案 解决方案二:图片发反了,正确是下面那个图片,错误是上面的图片解决方案三:都看不到图片..要不把js发上来看看解决方案四:看不到图...解决方案五:注意XHTML语法解决方案六:<head><title>无标题页</title><SCRIPTlanguage=JavaS

Android TextView使用SpannableString设置复合文本的方法详解_Android

本文实例讲述了Android TextView使用SpannableString设置复合文本的方法.分享给大家供大家参考,具体如下: TextView通常用来显示普通文本,但是有时候需要对其中某些文本进行样式.事件方面的设置.Android系统通过SpannableString类来对指定文本进行相关处理,具体有以下功能: 1.BackgroundColorSpan 背景色 2.ClickableSpan 文本可点击,有点击事件 3.ForegroundColorSpan 文本颜色(前景色) 4.

Android UI设计系列之自定义TextView属性实现带下划线的文本框（4）_Android

在Android开发过程中,如果Android系统自带的属性不能满足我们日常开发的需求,那么就需要我们给系统控件添加额外的属性了.假如有个需求是实现带下划线的文本显示(下划线),如果不使用自定义属性的话实现起来也不太难(起码我认为的实现方式是有许多种的),今天就讲解一下如何使用自定义属性来实现上述带下划线的文本框吧.还好Android中自定义属性不是很复杂,也可以归纳为三步走吧. 老规矩,还是先贴出工程目录吧: 一.添加属性文件 在values文件夹中新建attrs.xml文件,在文件中新建属性

jquery自定义下拉列表示例_表单特效

自从上次做了JQ自定义分页插件和表格插件后,就没在自定义过插件了,这一个月都在用linq和ef,基本前端都没怎么去碰了,今天有个同事说有个项目需要在下拉框里面带有复选框,本来想网上找下插件的,一想,其实这功能也并不难,于是就自己做了一个,也趁机再次熟悉下JQ自定义插件吧,好了,先附上效果图先: 看上去没怎么难吧,其实就是强化JQ,免得太久没用,生疏了.好了.附上我的代码: 复制代码 代码如下: (function($){  var option={     isEdit:false,  //是否