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

利用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這兩個屬性,往往導致頁面出現各種不同的效果;在頁面設計的時候,需要注意這些屬性在不同浏覽器的顯示效果。
󰈣󰈤
 
 
 
>>返回首頁<<
 
 
 
 
 熱帖排行
 
王朝網路微信公眾號
微信掃碼關註本站公眾號 wangchaonetcn
 
  免責聲明:本文僅代表作者個人觀點,與王朝網絡無關。王朝網絡登載此文出於傳遞更多信息之目的,並不意味著贊同其觀點或證實其描述,其原創性以及文中陳述文字和內容未經本站證實,對本文以及其中全部或者部分內容、文字的真實性、完整性、及時性本站不作任何保證或承諾,請讀者僅作參考,並請自行核實相關內容。
 
© 2005- 王朝網路 版權所有