1. 程式人生 > >css text-overflow屬性

css text-overflow屬性

text-overflow

屬性規定當文字溢位包含元素時發生的事情。

text-overflow: clip|ellipsis|string;  clip 修剪文字。 ellipsis 顯示省略符號來代表被修剪的文字 string 使用給定的字串來代表被修剪的文字。

<div style="width:200px; white-space:nowrap;
overflow:hidden;text-overflow:ellipsis; border:1px solid #336699">
試試看,前面一段我知道,加上...倒還真的不知道,看看效果
</div>

例項

<style type="text/css">
.overflow{
	width: 200px;#固定長度
	overflow: hidden;#超出部分隱藏
	text-overflow: ellipsis;#超出顯示...
	-o-text-overflow:ellipsis;
	
	white-space: nowrap;#不允許換行
}
</style>
<div class="overflow">
試試看,前面一段我知道,加上...倒還真的不知道,看看效果
</div>

#有些瀏覽器不相容css 的text-overf屬性可以通過jquery設定
#$(document).ready(function() {
$('.overflow').ellipsis();
}