关于文字内容溢出用皇冠官网网址(…)省略号表示 « 张鑫旭-鑫空间


本文颁发了。 2009年09月5日,周六,18:08,区分出狱于 体系分解。 研读 291599 次, 昔日 308 次

by zhangxinxu from
本文地址:/wordpress/?p=230

// 在附近的多行印皇冠官网网址…见本文的煞尾

第一词的序文。

在实践工程中,对译文和翻书页规划的定期地一定尺寸的的无把握,译文必然发生的事地踏过div(或那个制表)。,该地面的限度局限,这种办法是较好的的当译文超过div宽度无意识的限度局限…)显示,与众不同的的,如实践,民族会晓得在这点上有些人词被省略了。。css中有个属性叫做text-overflow:ellipsis;相配那个少数属性可以应验IE,chrome,safria浏览程序下印超出额皇冠官网网址省略显示,在扩大opera浏览程序的公有属性-o-text-overflow:ellipsis;就眼前说起,可以应验Firefox浏览程序不的承认主流浏览程序的印超出额皇冠官网网址省略显示。

而本文将供给物多种适合太好了的印超出额皇冠官网网址省略显示的办法,它的诸多办法都是他们想做的。。有本质上的附带档案的,有第一纯CSS办法,jQuery办法也被应用。。每种办法都供给物所有可能性的浏览程序下的截图确认,供给物状况网页,供给物源档案的偏微商,这都是值当信从的办法。,我愿望能扶助你。。有些隆隆声是轮流在第,你可以加啤酒花于,这与本文的以奇想主题布置的有关。。

你可以事前点击在这点上。:本文的各式各样的办法的演示状况翻书页,两页的比拟对领会和领会更有扶助。。

含量

1、国际公约的CSS办法,Firefox不的主流浏览程序译文
2、应用档案使Firefox背衬印超出额后皇冠官网网址省略体现
3、我对少数在线文字和网站不平。
4、我本身想出狱的办法——margin拒绝地位法
5、用jQuery限度局限印数的办法
6、jQuery无意识的确定宽度假设超过了该办法。

1、国际公约的CSS办法,Firefox不的主流浏览程序译文

下面是这种经用办法在各式各样的浏览程序打中功能:

在IE6浏览程序

在IE7浏览程序

谷歌Chrome浏览程序

在Safari浏览程序

在Opera浏览程序

Firefox赤狐浏览程序

可以牧座,仅在Firefox赤狐浏览程序无法应验印超出额省略体现,单词率直的从胸部点击。。专业综合考试思索密码本钱,体现比分,我人身攻击的以为这是件过分殷勤。,探寻圆满的与实践私下的一种均衡。条件翻书页上的宽大译文超出额,必要追求一种更为兼容的的办法。,条件偶然有词超出额的话,应用这种CSS密码就十足了。,单层制表,复杂好管闲事的:

.zxx_text_overflow{width:27em; 反照率的当空:不换行 text-overflow:ellipsis; -o-text-overflow:ellipsis; 超出额:使安顿

2、应用档案使Firefox背衬印超出额后皇冠官网网址省略体现

这是外来动植物供给物的一种方法。,应用Firefox的公有属性转变xml档案,可以使Firefox赤狐浏览程序印超出额后以省略的花样显示。
右键饲料为下载。:
转变办法如次所示:

要接合:URL(' #省略)

与CSS风骨划一。
值当当心的是:此XML档案不背衬对在下面路的入口。,不背衬相对路的入口。。执意,这事XML档案必要放在转变档案(CSS档案)中。,或HTML档案)的同含量下或下一级含量下,不克不及向上入口。我微暗存款。,我常常的尝试,不要紧。。

下面的图是体如今应用赤狐浏览程序:

Firefox赤狐浏览程序

可以垃圾场地牧座超出额的印比例用皇冠官网网址省略体现了。接合很CSS形成图案,可以应验承认主流浏览程序下的单译文省略。CSS代表以下质地:

.zxx_text_overflow{width:27em; 反照率的当空:不换行 text-overflow:ellipsis; -o-text-overflow:ellipsis; 要接合:URL(' #省略) 超出额:使安顿

拿 … 来说,在状况在翻书页上,这一节CSS写在翻书页上。,如下,该档案被敷在与HTML档案胜任的的含量中。。

3、我对少数在线文字和网站不平。

在昨日排演示状况翻书页,想找第一同事观看前面的图片显示办法长圆,行动声明,诸多用头顶与IE兼容的。,FF的文字,相当马上。,如下我看一眼是什么方法。消化不良性痛的出路。

同一事物兼容的IE,FF的文字

图中显示了谷歌搜索后的前五项。,里面四是同一事物的网站修建网站。,这四是同一篇文字。。
本文很不负责任。,我很久很久先前就深思熟虑和勘探了。,鉴于适合等存款而不克不及应用的办法。用法:在译文前面扩大带有省略的伪类。。这种办法可以被说成完整行不通的。。

率先,用头顶是个大不本来的的。,什么适合IE,FF吗?第一流的、Chrome做错浏览程序?看一眼本文的时期,铬先前出狱了,Safari,启动做错浏览程序吗?与IE兼容的,可以吗?二、你与IE兼容的。,FF?适合是什么,无论怎样同一地的。。这两个浏览程序做同一的事实吗?它到很远距离!第三、你与IE兼容的。吗?IE6和IE7下都天差地别的,你说什么适合?!

看本文的意义。,究竟不料两个浏览程序。,IE6和Firefox,我不晓得作者是第一大畸形儿否则表演的当空转变。,赤壁的话是你老一套了。!”

其次,这事办法有很多缺陷。:1、这是兼容的的,行动上,它极大地使失败了适合。,对IE6和IE7的功能是有区别的一地的,ie不背衬max-width让我以为掴作者耳巴。,是IE7不背衬,不要告诉我你缺少IE7浏览程序当你写本文。2、最初的的Chrome浏览程序,Safari和Opera可以显示省略译文超出额。,如今乘客名额有限制的和乘客名额有限制的:aftercontent,它将处置不妥,印率直的拦截者,它很丑。。3、多用河床制表,CSS是几行,缺少必要,资源高耗费。4、译文短时,前面跟着省略。,为什么不超出额省略显示?

假设兼容的,资源使从事,逻辑功能很蹩脚,这是一种完整缺少用的办法。。

我对作者的技术一点也没有以为不睦。,对缺少道德体系和科研成果的感到愤恨的。睁着眼睛胡说八道,这全部地都缺少被证明。,觉得说了很多睡觉处。我轻蔑那个同一事物的辅导网站。,这些网站有承认的课程,它只监督点击量。,不要紧它是本来的的否则好管闲事的的,它亦N年前出席的的。,误人子弟啊!我很困惑。,这些网站是设计的。,或规划,或许翻书页的适合和B的澄清同一地。,教另一个怎样造作网站。我牧座它经过,行动上,本文他们不晓得。,缺少办法做到这点。,兼容的IE,FF”,多诱惑的键词!不要紧怎样,你得拿一篇文字来学术这些键词。!这事不克不及对另一个做。!这些利欲熏心的网站,发送完整有力的文字,为了点明点击量。这和三鹿有什么分别?,做课程的,这是一位教练机。,做错事,捉弄人,有几何人杀了他们?,太不道德体系了。!

4、我本身想出狱的办法——margin拒绝地位法

下面是密码,HTML的偏微商:

这是一篇长文。,勘探译文假设会以省略超出额。。

CSS比例:

.zxx_text_overflow{width:24em; height:1.3em; 超出额:使安顿 急速摆脱掉:1
.zxx_text_overflow .text_con{float:left; height:1.3em; margin-right:3em; 超出额:使安顿
.zxx_text_overflow .text_dotted{width:3em; height:1.31em; 浮:右 margin-top:-1.3em;}

出路传达在有区别的的浏览程序(IE6,IE7和IE6的例,Firefox和Chrome作为Firefox的加盖于):

IE6下,IE7的同类型,体现划一

赤狐浏览程序下的功能

在Opera浏览程序体现

在Safari浏览程序体现

简明的阐明:This method is compatible with IE6,IE7(IE8未测过),Firefox,chrome,Safari,opera浏览程序。缺少黑客,不需要CSS形成图案。印短时,缺少省略,有超出额译文省略。。这可能性是第一终止的措辞。。规律很复杂。:当译文十足长时,将省略使安顿在下面的T层中。。键执意皇冠官网网址位div层的顶点的系数要比其margin的系数大这么挑剔。 条件你不实践用EM作为第一单位,它可以率直的做PX。,比分是同一地的。。

5、用jQuery限度局限印数的办法

密码与众不同的复杂。,应用起来也很手边的。,如次:

限度局限印数
$(".zxx_text_overflow").each(function(){
  var maxwidth=23;
  条件($(this),一定尺寸的()。 > maxwidth){
    $(this).text($(this).text().substring(0,maxwidth));
    $(this).html($(this).html()+''...'');
  }
});

所发生的出路是:在翻书页上class"zxx_text_overflow"的制表本质上的印的数量将至多显示23个,条件原始印的数量大于23,则会在前面添加皇冠官网网址省略(...),如次图所示:

jQuery限度局限印数以应验超出额省略。

6、jQuery无意识的确定宽度假设超过了该办法。

比拟先前的办法,js应验更智能(更多的资源),模仿打包(即必要确定制表的译文overf,推进它的宽度,继判别宽度大于假定的的宽度限度局限在猪舍似的地方,踏过跟踪的肾脏,添加省略,圈,模仿层的宽度决不CSS假定的值。。
js密码如次所示:

var wordLimit=function(){
  $(".zxx_text_overflow").each(function(){
    var copyThis = ((真的))。hide()。CSS
      方位 相对,
      宽度 汽车,
      超出额 可见
    });
    (这)后(copythis)。
    if 宽度 {
      $(this).text($(this).text().substring(0, (这事)。html() length-4)。
      $(this).html($(this).html()+''...'');
      ();
      wordLimit();
    } else {
      垃圾场复本
      (); 
    }
  });
}
wordLimit();

CSS比例必要假定的第一宽度值,拿 … 来说:

.zxx_text_overflow { width: 400px; }

出路如次:

jQuery宽度确定应验超出额省略

点击在这点上:本文的各式各样的办法的演示状况翻书页

Final supplement:
我花了一段时期把这两种jQuery办法接合起来。,排第一小的jQuery可插件,对jQuery感兴趣的人率直的应用它是很手边的的。。
这事一列纵队印超出额用皇冠官网网址省略显示的jQuery可插件的应用很复杂。拿 … 来说:

$(".test1").wordLimit();

无意识的获取CSS宽度举行处置,条件the.test1缺少装备第一假定的宽度的CSS,它不任务

$(".test2").wordLimit(24);

截取印数,大于0的必须的。,这传达,在制表类打中印数是test2是

$.wordLimit()空的本质上的粉底宽度无意识的截取。,该值被印数截获。。

这事可插件js下载(右键),饲料)
源档案包下载(zip) 18.6K)

点击在这点上:译文超出额长圆显示演示应用jQuery可插件翻书页的加盖于

印超出额皇冠官网网址完毕语

css,js等前端技术博古通今。,必定不动的那个较好的的receiver 收音机,在这点上无论怎样记下我所晓得的。,愿望对另一个有扶助。技术的先进从未终止过。,或许左直拳右直拳年后,我在本文中提到的少数办法先前老一套了。。愿望那样地!

校正2010-04-16
有不少同业讯问当取得a制表互连的时分怎样处理皇冠官网网址显示的成绩,本文第9条打中评论,我出席的了第一处理办法。,条件你有同一的成绩,你可以看一下评论9。

校正2013-04-22
远在上年,承认浏览程序都推进了背衬。text-overflow:ellipsis;办法,如下,本文有很多是!

校正2015-10-08
现代人的浏览程序,拿 … 来说,在WebKit内核浏览程序,或摆脱掉端,是可以应验多行译文质地超过皇冠官网网址…最近的不育系显示,类型的CSS结成如次:

.box {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

里面-webkit-line-clamp这是把持线的数量。,是3那执意显示3行,3行完毕皇冠官网网址,条件是22行最高点。

您可以点击在这点上:多行印超出额皇冠官网网址…显示演示

你会牧座你祝福什么!

本文是新颖的文字。,转载请划出源自张新旭新当空新生
本文地址:/wordpress/?p=230

(本文的煞尾)

制表: box-flex, ellipsis, text-overflow, 印限度局限, 可插件, 皇冠官网网址, 省略

发表评论

电子邮件地址不会被公开。 必填项已用*标注