web前端培训：CSS中单行文本溢出显示省略号的方法

　　CSS中单行文本溢出显示省略号的方法你知道吗?在web前端技术学习中，这个问题其实是属于老生常谈了，因为css单行文本的应用是非常频繁的，比如网站最基本的文章列表，标题会很长，而显示列表的区域宽度却没有这么宽，这时候最正常的做法就是让超出宽度的部分文字用省略号(…)来表示。

　　通常做法是网站后台程序截取一定的字符然后输出到前台显示或者前台用javascript截取一定的字符，但是通过控制字数来截取的话还是存在一个大问题的，因为中文和英文的字符宽度问题，这个字数不好控制，而且通用性较差。那么有没有更好的方法呢，比如直接用 CSS来解决的，当然是有的。

　　web前端培训：CSS中单行文本溢出显示省略号的方法，首先我们要知道单行文本是如何实现这个效果的，代码如下：

　　请注意，以上三行代码缺一不可哦，那接下来我们就一一看一下给个的作用吧!

　　–>

　　text-overflow

　　value分别为 clip | ellipsis | ellipsis-word

　　–>clip ：不显示省略标记(…)，而是简单的裁切

　　–>ellipsis ：当对象内文本溢出时显示省略标记(…)，省略标记插入的位置是最后一个字符

　　–>ellipsis-word：对象内文本溢出时显示省略标记(…)，省略标记插入的位置是最后一个词(word)

　　text-overflow

　　是一个比较特殊的样式，因为我们可以用它代替我们通常所用的标题截取函数，而且这样做对搜索引擎更加友好，如：标题文件有50个汉字，而我们的列表可能只有400px的宽度。如果用标题截取函数，则标题不是完整的，如果我们用CSS样式text- overflow:ellipsis，输出的标题是完整的，只是受容器大小的局限不显示出来罢了(表现上是超出部分显示省略标记…)。

　　text-overflow: ellipsis

　　属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省略号的效果。还必须定义：强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden)。只有这样才能实现溢出文本显示省略号的效果。

web前端培训：CSS中单行文本溢出显示省略号的方法相关推荐

【用CSS让单行文本溢出显示省略号】
如何用CSS让单行文本溢出显示省略号 <style> p { 1.设置宽高 width:160px; height:20px; font:size:16px; background-col ...
css之-单行文本溢出显示省略号，多行文本溢出显示省略号
单行显示省略号 white-spacing:nowrap; overflow:hidden; text-overflow:ellipsis; 规定某行显示省略号 -webkit-line-climp: ...
单行文本溢出显示省略号，单行文本溢出显示省略号
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
css3文本溢出显示省略号的方法
项目中常常有这种需要我们对溢出文本进行"-"显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英雄指教. 单行语法 o ...
css 单行文本溢出显示省略号
有时候我们会遇到这样的情景,在一行显示过长的文字时会溢出,页面将变得很丑陋.这时候我们想要只显示一部分文字,将多余部分以省略号 "..." 的形式显示.那么我们可以通过设置 CSS ...
CSS中让文字溢出显示省略号
第一种方法 display: -webkit-box; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vert ...
web前端基础 html5+css3（九.精灵图，字体图标，css三角，鼠标样式cursor，.轮廓线 outline，vertical-align，文本溢出显示省略号）
1.精灵图(有效减少服务器介绍和发送请求的次数,提高页面的加载速度) 将网页的小背景图像整合到一张大图中,这样服务器只需要请求一次就可以了 background-position (图片往坐标左边走) ...
关于文本溢出显示省略号、圣杯双飞翼布局、CSS Hack、PS基础、以及项目的一些规范
溢出显示省略号单行文本溢出显示省略号方法一: .box{width:100px; border:1px solid red; /* 设置内容不换行 */white-space:nowrap;/ ...
css overflow 省略号,图文详解CSS文本溢出显示省略号效果（text-overflow）
在工作中经常会遇到文本溢出,需要显示省略号的情况,那这个省略号是怎么实现的呢?这篇文章就给大家讲讲CSS中如何用text-overflow实现超出部分显示省略号.对CSS文字溢出加省略号这个知识不熟悉 ...

web前端培训：CSS中单行文本溢出显示省略号的方法

web前端培训：CSS中单行文本溢出显示省略号的方法相关推荐

最新文章

热门文章