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

利用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- 王朝網路 版權所有