ling811的专栏

随心所动,自由翱翔

css3的文本效果text-overflow

<!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的效果(鼠标经过)


阅读更多
版权声明:原创文章,请标明出处~~~ https://blog.csdn.net/ling811/article/details/17092293
文章标签: css3 textoverflow
上一篇css3的文本效果text-justify
下一篇css3的word-break
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭