CSS完成限定篇幅作用当目标内文字外溢时显示信

2021-01-20 08:44 jianzhan

拷贝编码
编码以下:

<div style="width:200px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; border:1px solid red">试一试试一试试一试试一试试一试试一试试一试试一试试一试试一试试一试</div>

实际效果:
 

英语的语法:

text-overflow : clip | ellipsis

主要参数:

clip :  无法显示省略标识(...),而是简易的裁剪

(clip这个主要参数是不常见的!)

ellipsis :  当目标内文字外溢时显示信息省略标识(...)

表明:

设定或查找是不是应用1个省略标识(...)标识目标内文字的外溢。

请您留意,text-overflow:ellipsis特性在FF中是沒有实际效果的。

示例:

div { text-overflow : clip; }

text-overflow是1个较为独特的款式,大家能够用它替代大家一般所用的题目截取涵数,并且这样做对检索模块更为友善,如:题目文档有50 个中国汉字,而大家的目录将会仅有300px的宽度。假如用题目截取涵数,则题目并不是详细的,假如大家用CSS款式text- overflow:ellipsis,輸出的题目是详细的,只是受器皿尺寸的局限无法显示出来而已。

text-overflow特性仅是注释,当文字外溢时是不是显示信息省略标识。其实不具有其它的款式特性界定。大家要想完成外溢时造成省 略号的实际效果。还务必界定:强制性文字在1行内显示信息(white-space:nowrap)及外溢內容为掩藏(overflow:hidden)。仅有这样 才可以完成外溢文字显示信息省略号的实际效果。

有的情况下的某段文字过长了,会危害全部的合理布局,许多人用动态性語言来处理这个难题,但务必区别汉语和英文,由于汉语非常于两个英文本符长度,这样不但繁琐,并且加剧了服务器的压力。实际上,大家彻底可使用CSS完善处理这个难题,

拷贝编码
编码以下:

white-space:nowrap;overflow:hidden;text-overflow:ellipsis; <!-- 就这3句,,,嘿嘿....->