首页 > 开发 > 前端 > 正文

使用text-overflow截断超长文字显示技巧

2016-04-11 09:30:49  来源:极客头条
  CSS里的text-overflow属性能用来控制超长溢出的文字内容的显示方式,超出的文字可以是直接截断、用省略号表示,或用自定义的字符替代。
  text-overflow的起作用环境是在一个‘block’状态下的父元素容器里,它的inline子元素上水平方向不能换行(因为 ‘white-space: nowrap’)的情况下。要想text-overflow起作用,我们还不行能让‘overflow’的值为visible,因为我们的目的就是不想让超出的部分直接显示出来。
  text-overflow不仅能控制文本尾部超出部分的显示方式,还可以控制文本开头超出部分的显示方式,比如:
/* Overflow behavior at left end | at right end Directionality has no influence */ text-overflow: clip ellipsis; text-overflow: "…" "…"; text-overflow的几个有效值: clip 超出的部分直接截断 ellipsis 超出的部分用省略号表示 自定义字符 超出的部分用自定义字符表示 text-overflow用法样例 p { white-space: nowrap; width: 100%; overflow: hidden; /* "overflow" value must be different from "visible" */ text-overflow: ellipsis; } 实例演示 多行文本的超长截断问题   上面介绍的text-overflow,我们只能用在单行文本的超长溢出情况,当文本换行成多行时,它就不起作用了,但实际编程中,我们经常会遇到多行文本的超长溢出控制问题。比如,空间只能显示三行,希望在第三行结尾处超出的部分用省略号表示,怎么解决?
  如果你使用的是最新版的谷歌浏览器,那这个问题相对容易解决,因为Webkit引擎里提供了一个控制多行文本超出溢出控制显示CSS属性:-webkit-line-clamp: N;:
.giveMeEllipsis { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: N; /* 控制显示的行数 */ line-height: X; /* 对不支持浏览器的 */ max-height: X*N; /* 对不支持浏览器的弥补 */ } -webkit-line-clamp实例演示   注意:你需要使用最新版的谷歌浏览器。

  如果你需要在火狐浏览器上也有要求,那只能使用上面代码里的弥补方法,就是限定限制文字父元素的高度为行高的整数倍,然后超出的部分直接截断处理:
.max-lines { text-overflow: ellipsis; word-wrap: break-word; overflow: hidden; max-height: 3.6em; line-height: 1.8em; }   其中 max-height: = line-height: × .
分享这篇文章:     十分形象的迷宫搜索算法,能看的计算机如何一步一步的探索路径,障碍物,最终确定最佳,最近的路线图
  这里我们用纯CSS技术表现出30种动物的碎片拼图形象,这30动物,非常的可爱,但不幸的是,它们都是濒临灭绝的动物,它们的生存情况正面临着危机。
  这是一个用HTML5制作的智力游戏,有相当的难度。每个方块一面橙色,一面蓝色。点击一个方块,这个方块的颜色会翻转,并且,与它邻接的方块的颜色也会翻转。使拼板全部变成蓝色, 你就算过关了。
   虽然并不是Adobe的Photoshop发明了混合模式,但它的实现效果是最真实的。但现在,你不需要使用Photoshop来运用混合模式美化你的图片,因为CSS3里提供里动态的实现这种效果的方法。
HTML5+CSS3特效幻灯片(impress.js)   HTML5和CSS3的诞生和普及必将对传统行业带来巨大的冲击,像微软PPT这样的软件必将慢慢转移的在线的HTML5+CSS3上,因为用HTML5+CSS3实现幻灯片不仅更简单、容易,而且功能更强调,特效更绚丽。impress.js就是这样一款可以让你轻松利用CSS3动画实现具有神奇特效的幻灯片工具。
   这里提供了各种各样的超链接特性,有些是借助伪元素,有些是借助svg,有些是借助HTML5动画。用你的鼠标悬停在这些链接上,给你跟传统链接完全不一样的效果感觉。你需要使用现代浏览器,比如谷歌浏览器或火狐浏览器。
  在一个大型项目里我需要制作出抖动的效果。最初我使用的是普通的CSS。
当开发完成后,我发现了这个很酷的jQuery plugin(由@jackrugile开发)。
于是我就开始思考,我应该做出这个小的CSS project。
  自适应网页设计,也叫做响应式网页设计(英语:Responsive web design)是一种网页设计的技術做法,该设计可使网站在多种浏览设备(从桌面电脑显示器到移动电话或其它便携设备)上阅读和导航,根据设备尺寸的不同,自动的调整页面上的元素布局和数量。
  这是一个很酷的HTML5技术应用,用户可以在画布上用画笔写出自己想看的文字或图案,这个应该能将你写的东西用3D方式呈现,而且让它围着中心3D旋转,只要你设计的巧妙,你可以绘制出让人惊叹的效果和图案。
  这是一个生产内衣的公司使用HTML5技术制作的公益游戏。曾获得Cutting Edge技术奖。游戏的主旨是反对印度国内存在的包办婚姻现象。内衣公司的游戏非常有内衣特色。但游戏中使用的技术还是让人佩服的,纯HTML5+JS,整个游戏有很好的互动性,值得游戏设计者学习。
  程序员给女朋友用HTML5制作的3D相册,使用鼠标拖拽,能看到3D旋转效果,点击相片,相片能放大,移近。程序员发挥自己的专长,这是那些不懂编程的人望尘莫及的。本相册使用了HTML5的画布技术,需要谷歌浏览器或火狐浏览器等现代浏览器才能正常观看。
用CSS3和JavaScript开发《街头霸王》游戏   最近我学到了一种很酷的技术,使用CSS3的steps()动画属性来生成PNG背景动画。这种技术的主要功能是利用铺贴PNG背景图的方式“重现”GIF图的动画效果。我的朋友都知道,年轻时候我非常痴迷《街头霸王》游戏,而当我看到了这个素材….你知道我的脑子里想到了什么吗?
  如果当你翻开一本书的时候,里面飞出来一只蝙蝠,或是一条会喷火的龙,你会有什么感觉?惊奇!赞叹!目瞪口呆!我想到了电影《哈利波特》里的那份会动的报纸。这里将会给你带来一种类似的奇观——一本书里的大千世界。随着浏览器技术的不断革新,越来越多的可能成为了现实。这里就是现代网页技术的典型代表。
  程序员的求职简历应该体现出程序员的技术能力,但几乎所有的简历都是用文字表述的,为什么让简历载体自身成为体现程序员技能的平台呢?如果你还不明白我说的是什么意思,那就看看这个超级酷炫的HTML5互动式程序员求职简历,一定会让你惊异不已。