css之overflow应用

overflow应用的两个小例子：

1、单行文本出现省略号的情况

<!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" />
<title>单行文本省略号</title>
<style type="text/css">
.para {
   height: 20px;
   width: 200px;
   /*换行*/
   white-space:nowrap;
   /*溢出隐藏*/
   overflow:hidden;
   /*末尾改为省略号*/
   text-overflow:ellipsis;
}
</style>
</head>
<body>
<p class="para">
单行文本省略号单行文本省略号单行文本省略号单行文本省略号
</p>
</body>
</html>

预览结果如图

2、图片超链接时如果网速较慢，加载不了css也要连接成功的情况

<!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" />
<title>图片超链接不加载css也能链接成功</title>
<style type="text/css">
.box {
   /*转换为块级元素*/
   display:block;
   height: 55px;
   width:142px;
   background:url(../Pictures/logo_small.gif) no-repeat;
   /*让文字出界，超出a元素的宽度即可*/
   text-indent:145px;
   /*换行*/
   white-space:nowrap;
   /*溢出隐藏*/
   overflow:hidden;
}
</style>
</head>
<body>
<a href="https://www.cnblogs.com/" class="box">博客</a>
</body>
</html>
效果预览：

巴特西

css之overflow应用

最新文章

热门文章