css3的文本效果text-overflow

原创 2013年12月03日 11:03:55
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style> 
div
{
white-space:nowrap; 
width:15em; 
overflow:hidden; 
border:1px solid #000000;
}
div:hover
{
width:20em;
text-overflow:inherit;
overflow:visible;
}
.clip{ text-overflow:clip;}
.ellipsis{ text-overflow:ellipsis}
</style>
<title>无标题文档</title>
</head>

<body>
<div class="clip">
    这个是text-overflow:clip;的效果。
</div>
<br />
<DIV class="ellipsis">
这个是text-overflow:ellipsis;的效果。
</DIV>
</body>
</html>


clip 修剪文本
ellipsis 显示省略符号来代表被修剪的文本。
string 使用给定的字符串来代表被修剪的文本。


效果图:


带hover的效果(鼠标经过)


版权声明:原创文章,请标明出处~~~

CSS3中text-overflow支持以...代替超出文本

CSS3中text-overflow支持以...代替超出文本。   1.div1:默认状态。超出文本默认显示在div外   2.div2:text-overflow:ellipsis; 使...

css3的文本效果text-justify

div { text-align:justify; text-justify:distribute; } CSS text-justify 实例 Shanghai is the larges...
  • ling811
  • ling811
  • 2013年12月03日 10:29
  • 601

CSS3属性之text-overflow:ellipsis详解

1.语法:text-overflow:clip|ellipsis 默认值:clip; 适用于:所有元素 clip:当前对象内文本溢出时不显示省略标记(...),而是将溢出部分裁剪。 ellipsis:...

CSS3属性之五:text-overflow

语法: text-overflow : clip | ellipsis 取值: clip: 不显示省略标记(...),而是简单的裁切。 ellipsis: 当对象内文本溢出时...

《CSS3实战》文本阴影:text-shadow

语法: none|length>|none|[shadow>,]*shadow> 或 none|color>|[,color>]*123 取值简单说明: 表示颜色; 表...

css3text-transform,用来控制文本的大小写属性

鱼C工作室 body{ background: #FF33ff url(1.jpg) no-repeat 50% 0; marg...

css3 text-shadow设计文本阴影

css3 text-shadow设计文本阴影

CSS3实战1-文本属性text-shadow的用法

text-shadow 定义文本阴影或模糊效果。text-shadow属性在css2中已经定义了,但是在css3中又重新定义了,并且增加了不透明度的效果。 基本语法text-shadow:none |...

《CSS3实战》笔记--文本阴影:text-shadow

text-shadow CSS3

CSS3属性之text-shadow和box-shadow(立体效果的实现)

语法: text-shadow : none |  none | [, ] *  或none | [, ]* 相关属性 : 无 取值:  :指定颜色。 :由浮点数字和单位标识符组成...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css3的文本效果text-overflow
举报原因:
原因补充:

(最多只允许输入30个字)