css3的文本效果text-overflow

最新推荐文章于 2024-04-29 20:15:57 发布

依然那么楞

最新推荐文章于 2024-04-29 20:15:57 发布

阅读量580

点赞数

文章标签： css3 textoverflow

本文链接：https://blog.csdn.net/ling811/article/details/17092293

版权

<!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	修剪文本

clip

修剪文本

ellipsis	显示省略符号来代表被修剪的文本。

ellipsis

显示省略符号来代表被修剪的文本。

string	使用给定的字符串来代表被修剪的文本。

string

使用给定的字符串来代表被修剪的文本。

效果图：

带hover的效果（鼠标经过）

优惠劵

依然那么楞

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3的文本效果text-overflow

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;}.elli
复制链接

扫一扫