关闭

css3的文本效果text-overflow

标签: css3textoverflow
418人阅读 评论(0) 收藏 举报
<!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的效果(鼠标经过)


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:183146次
    • 积分:3294
    • 等级:
    • 排名:第10752名
    • 原创:141篇
    • 转载:51篇
    • 译文:1篇
    • 评论:21条
    文章分类
    最新评论