問題描述

怎么用css截取字符？

問題解答

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

圍觀一下哦，學習一下。

方法一：

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

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

方法二：

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

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

CSS是實現(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的最佳場所不是文章的行文，而是用以單行顯示的標題或摘要的列表。