| 導購 | 订阅 | 在线投稿
分享
 
 
 

利用CSS讓容器的溢出部分內容隱藏起來,smarty就可以不用截取字符串了

來源:互聯網  2008-08-15 06:29:31  評論

在網頁設計中,會遇到文本超過固定長度導致整體的網頁變形的情況。程序員往往需要截取固定的長度來實現某些固定長度的控制。介紹一種直接采用CSS的代碼控制來實現文本截取的方法。與程序員的直接字符截取的方式有點區別,其優勢是可以自動控制文本顯示的長度;缺點是不同浏覽器的兼容性並不完美。使用到 overflow,text-overflow,white-space 這三個主要的屬性,其他的代碼屬于修飾作用。

CSS代碼:

<style>

.texthidden{

width:200px;

overflow:hidden;

text-overflow:ellipsis;

white-space:nowrap;

border:1px solid #ddd;}

</style>

HTML代碼:

<div class="texthidden">

CSS讓容器的溢出部分內容隱藏起來

</div>

代碼分析:

1. width:200px; //指定寬度:

2. overflow:hidden; //將超出內容隱藏

3. text-overflow:ellipsis; //IE專用屬性,文本溢出時顯示省略標記();其他浏覽器不支持。

4. white-space:nowrap; //強制內容不換行。強制在同一行內顯示所有文本,直到文本結束或者遭遇 br 元素

目前使用這種方法比較成功的示例是Gmail的內容顯示,在IE下達到最好的效果。如果是FF那就比較糟糕,總是會出現截取半個中文的效果。其中涉及到最主要的原因是 text-overflow 這個屬性只在IE下有效,目前很多CSS屬性也存在這個問題,特別重要的是Margin和Padding這兩個屬性,往往導致頁面出現各種不同的效果;在頁面設計的時候,需要注意這些屬性在不同浏覽器的顯示效果。

在網頁設計中,會遇到文本超過固定長度導致整體的網頁變形的情況。程序員往往需要截取固定的長度來實現某些固定長度的控制。介紹一種直接采用CSS的代碼控制來實現文本截取的方法。與程序員的直接字符截取的方式有點區別,其優勢是可以自動控制文本顯示的長度;缺點是不同浏覽器的兼容性並不完美。使用到 overflow,text-overflow,white-space 這三個主要的屬性,其他的代碼屬于修飾作用。 CSS代碼: <style> .texthidden{ width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; border:1px solid #ddd;} </style> HTML代碼: <div class="texthidden"> CSS讓容器的溢出部分內容隱藏起來 </div> 代碼分析: 1. width:200px; //指定寬度: 2. overflow:hidden; //將超出內容隱藏 3. text-overflow:ellipsis; //IE專用屬性,文本溢出時顯示省略標記();其他浏覽器不支持。 4. white-space:nowrap; //強制內容不換行。強制在同一行內顯示所有文本,直到文本結束或者遭遇 br 元素 目前使用這種方法比較成功的示例是Gmail的內容顯示,在IE下達到最好的效果。如果是FF那就比較糟糕,總是會出現截取半個中文的效果。其中涉及到最主要的原因是 text-overflow 這個屬性只在IE下有效,目前很多CSS屬性也存在這個問題,特別重要的是Margin和Padding這兩個屬性,往往導致頁面出現各種不同的效果;在頁面設計的時候,需要注意這些屬性在不同浏覽器的顯示效果。
󰈣󰈤
王朝萬家燈火計劃
期待原創作者加盟
 
 
 
>>返回首頁<<
 
 
 
 
 熱帖排行
 
 
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有