Jul
12
2013
CSS截取字符串自动补充省略号
作者：
绝缘体.. 发布：
2013-07-12 15:06 分类：
未分类 阅读：
抢沙发
在页面中截取字符串并不一定非得用程序来实现截取，用CSS一样是可以实现字符串的截取的。并且用程序截取中英文混合的字符串时会发生截取的长度长短不一的情况，而用css截取就不会有这种问题。下面和大家分享一种利用css截取字符串的方法，当字符串过长的时候会自动补充省略号的。效果非常好。截取效果如下图：
CSS截取字符串自动补充省略号的具体代码如下：
<html xmlns="http://www.phpernote.com/php-function/665.html">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS自动截取字符串</title>
<style>
body{
background-color:#f4f4f4;
font-size:12px;
}
div.test{
width:200px;
height:100px;
border:1px solid red;
border-top:4px solid red;
padding:10px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
</style>
</head>
<body>
<div class="test">
DIV+CSS模板、后台模板、图片图标下载，CSS代码实例、CSS导航菜单、CSS图表<h3><a href="http://www.phpernote.com/div-css/4.html" style="color:#000;">http://www.phpernote.com/div-css/4.html</a></h3>
</div>
</body>
</html>
从以上代码可以看出来其实主要是用到了css的：text-overflow:ellipsis;这个属性，当然overflow:hidden;white-space:nowrap;这些属性也是必须的，另外也必须定义宽度。
微信扫一扫，打赏作者吧～
CSS截取字符串自动补充省略号：等您坐沙发呢！
发表评论
