用CSS断开标识符串的两种好用方式

日期:2020-09-23 类型:科技新闻 

关键词:ps网页版在线制作,静态网页制作方法,微云网页版,怎么制作一个网页,django网页模板

方式1:

拷贝编码
编码以下:

<div style="width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;"> 随意长度的标识符串 </div>

表明:优势是內容能够为任何HTML元素,包含超连接和照片等,在IE6中还会在末尾全自动显示信息省略号。缺陷是务必特定宽度标值,而且宽度不可以是百分数,不然在IE中会被觉得是标识符总长的百分比。

方式2:

拷贝编码
编码以下:

<input type=”text” style=”width:100%; cursor:default; border-width:0; border-style:none; background-color:transparent;” value=”随意长度的标识符串” readonly/>

表明:优势是宽度能够设为百分数。但缺陷是內容只能为纯文字,不可以有超连接等內容。

CSS 断开标识符串完成文本全自动断开,编码以下:

拷贝编码
编码以下:

div.test{
width:200px;
height:14px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
text-overflow: ellipsis;/* IE/Safari */
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;/* Opera */
-moz-binding: url("ellipsis.xml#ellipsis");/*FireFox*/
}

重要是text-overflow,其英语的语法以下:

text-overflow:clip | ellipsis

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

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

要留意的是:这个特性是IE专用的!但是,却非仅有IE能用。该标识尽管沒有被乖哦公布适用听取意见,但却被许多访问器的独享特性所包括。text-overflow独立应用是不起功效的,务必有white-space:nowrap;overflow:hidden;这两句的相互配合即可。前1句的功效是强制性在同1行内显示信息全部文字,直至文字完毕或遭受br目标。

可以看出,用text-overflow的最好场地并不是文章内容的写作,而是用以单行显示信息的题目或引言的目录。

英语的语法:

white-space : normal | pre | nowrap

赋值:

normal :  默认设置值。默认设置解决方法。文字全自动解决换行。倘若到达器皿界限內容会转到下1行

pre :  换行和别的空白标识符都将遭受维护。这个值必须IE6+或 !DOCTYPE 申明为 standards-compliant mode 适用。假如 !DOCTYPE 申明沒有特定为 standards-compliant mode ,此特性可使用,可是不容易产生功效。結果等同于于 normal 。参考 pre 目标

nowrap :  强制性在同1行内显示信息全部文字,直至文字完毕或遭受 br 目标。参考 noWrap 特性

表明:

设定或查找目标内空格标识符的解决方法。

空格标识符,像换行,空格,TAB,在HTML文本文档中默认设置的是被忽视的。当此特性设定为 normal 或 nowrap 时,你可使用不换行空格的取名实体线 来加上空格,用 br 元向来加上换行。此特性对你应用文本文档目标实体模型(DOM)实际操作的內容的危害与其对IE显示信息內容的危害1样。

此特性功效于块目标。

此特性针对 currentStyle 目标而言是写保护的。针对别的目标而言是可读写能力的。

对应的脚本制作特点为 whiteSpace。