css3的文本效果text-overflow

最新推荐文章于 2025-08-09 14:20:21 发布

依然那么楞

最新推荐文章于 2025-08-09 14:20:21 发布

阅读量609

点赞数

CC 4.0 BY-SA版权

文章标签： css3 textoverflow

本文链接：https://blog.youkuaiyun.com/ling811/article/details/17092293

本文展示了CSS中text-overflow属性的两种用法：clip和ellipsis，通过实例代码演示了它们在鼠标悬停时的交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>