問題描述

怎么用css截取字符？

問題解答

怎么用css截取字符？-PHP中文網(wǎng)問答-怎么用css截取字符？-PHP中文網(wǎng)問答

圍觀一下哦，學(xué)習(xí)一下。

方法一：

<p style="width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;"> 任意長度的字符串 </p>

說明：優(yōu)點(diǎn)是內(nèi)容可以為任何HTML元素，包括超鏈接和圖片等，在IE6中還會在結(jié)尾自動顯示省略號。缺點(diǎn)是必須指定寬度數(shù)值，并且寬度不能是百分?jǐn)?shù)，否則在IE中會被認(rèn)為是字符總長的百分比。

方法二：

<input type="text" style="width:100%; cursor:default; border-width:0; border-style:none; background-color:transparent;" value="任意長度的字符串" readonly/>

說明：優(yōu)點(diǎn)是寬度可以設(shè)為百分?jǐn)?shù)。但缺點(diǎn)是內(nèi)容只能為純文本，不能有超鏈接等內(nèi)容。

CSS是實(shí)現(xiàn)文字自動截斷，代碼如下：

p.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的最佳場所不是文章的行文，而是用以單行顯示的標(biāo)題或摘要的列表。