HTMl控制单行长度 省略多余文字 text-overflow使用方法

通常情况下将一个过长的标题显示到一行内,我们会用程序截取某几个字,这样不能保证这一行文字的长度一致。因为中国汉字与阿拉数字或是英文字母宽度不一致呀。

如果您喜欢这种方法来控制一行文字的长度,可以参考我的这篇两篇日志:

下面再介绍一种比这个简单的办法,就是用Css的text-overflow方法来实现。这种控制单行长度的方法就不再细说,详看下面这个例子就是。
Css text-overflow使用方法代码如下:
<style type="text/css">
#ttoo{margin:10px;border:1px solid #e00;}
#ttoo li{width:300px;line-height:25px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}
</style>
<ul id="ttoo">
<li><a href="http://www.yaocai123.com/">中药材百科 中国最大的中药材、中药种植、中药配方的网站</a></li>
<li><a href="http://www.yaocai123.com/zhongzhi/">中药种植技术,中药材、中草药栽培技术平台!</a></li>
<li><a href="http://www.xgto.cn">淘宝网手机商城,淘宝网网上购物手机导购!</a></li>
<li><a href="http://www.dy03.cn">第3电影网:优酷网在线看电影,免费在优酷网看电影!</a></li>
</ul>
看一下效果吧:
版块:html-css笔记 Tags: , , 时间:2009-10-17 评论:(0)

如何去掉HTML Img标签下的间距空白?

很早就发现自己HTML布局各浏览器兼容性不是很好,最难搞的一个问题就是Img标签下有间距,也是一直以来没有解决的问题。

:Img及其周围的标签Margin,Padding属性均为0。

今天无意的一句代码居然搞定了且Ie、Firefox、Chrome、Opera完全兼容。

去掉Img标签下的间距代码(红色部分):

<img src="http://www.xgto.cn/img/logo.gif"  align="absmiddle" style="margin:0;paddng:0;border:1px solid red;" />

<div style="margin:0;padding:0;border:1px solid blue;">看我有间距没</div>

终于可以松下一口气了。

版块:html-css笔记 Tags: , 时间:2009-10-13 评论:(0)

Html Mailto标签详细使用方法

Html中mailto标签是一个非常实用的贴近用户体验的标签,大多情况下人们都在这样使用

<a href="mailto:example@phplamp.com">example@phplamp.com</a>

这样,当我们点击了example@phplamp.com链接后浏览器会为我们自动选择本地的默认邮件软件,并将mailto标签后example@phplamp.com邮件地址放到邮件软件的发送地址中,少去了我们发送邮件时输入发送地址的烦扰,同时也可以避免输错邮件地址。

其实mailto标签有更实用的使用方法。比如:加入邮件默认标题,抄送地址,暗送(密件抄送)地址,邮件内容….

下面说一下详细的使用方法: 查看详细内容…

版块:html-css笔记 Tags: 时间:2008-10-30 评论:(0)

Flash遮挡流动层(Absolute)的解决办法Ie,Firefox,Opera

特别声明:以下提到的代码全部添加到遮挡其它层的Flash代码中。

解决办法:

<param name="wmode" value="transparent">

<embed>标签中加:wmode="transparent"。如此段不加,Firefox,Opera中的此Flash仍然遮挡。

版块:html-css笔记 Tags: , 时间:2008-09-11 评论:(1)

不同浏览器编程之Css Hack小结 (摘)

无聊时浏览网站却发现这么个好东西,顺手摘了下来,内容如下:

CSS HACK

1, !important 随着IE7对!important的支持,!important 方法现在只针对IE6的HACK。(注意写法:记得该声明位置需要提前)

CSS代码
  1. #wrapper{   
  2.     width100px!important/* IE7+FF */  
  3.     width80px/* IE6 */  
  4. }  

 2, IE6/IE77对FireFox 查看详细内容…

版块:html-css笔记 Tags: , , , 时间:2008-07-03 评论:(0)

relative与absolute的使用

Div+css布局已是现在比较流行与推崇的网页布局方式。当您的网页结构比较复杂或想完成某种特殊的效果的时候,可能float已经不能满足您的布局要求。这时候不防试一试:relative+absolute。

假如你想完成下图的效果:

查看详细内容…

版块:html-css笔记 Tags: , , 时间:2008-07-01 评论:(0)