Home >Web Front-end >CSS Tutorial >CSS text interception function implementation code
CSS text interception function implementation code
- WBOYOriginal
- 2016-05-16 12:05:231874browse
this chapter will introduce you to using css to automatically intercept text, without the use of background programs and js. it has certain reference value. friends in need can refer to it. i hope it will be helpful to you.
the benefits are:
compatible with ie, firefox, opera;
conducive to content integrity; conducive to seo;
no need for background program processing;
can be used in the front desk can adjust the length to be intercepted at any time.
disadvantages:
the interception length cannot be automatically determined. when the characters are very short, subsequent ellipses will be generated in firefox.
in addition, when setting the interception width, pay attention to try to make the text interception complete.
code example:
<!DOCTYPE html>
<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">
body{font-size:13px;color:#8c966b;}
p{clear:both;width:340px;border:1px solid #333;margin:3px;padding:3px;}
p a{color:#8c966b;text-decoration:none;}
p a:hover{text-decoration:underline;}
p a{display:block;width:310px;white-space:nowrap;overflow:hidden;float:left;
-o-text-overflow: ellipsis; /* for Opera */
text-overflow:ellipsis; /* for IE */
}
p:after{content:"...";padding-left:3px;font-size:12px;}/* for Firefox */
</style>
</head>
<body>
用css来实现自动截取文字，不需要后台程序和JS的使用
好处是：有利于内容完整性，有利于SEO，无需后台程序处理，可以在前台随时调节要截取的长度。
<div><a href="#">不好的地方：不能自动判断截取长度，当字符很短的时候在Firefox中也会生成后面的省略符号。</a></div>
<div><a href="#">另外在设置截取宽度的时候，要注意，尽量让文字截取完整</a></div>
</body>
</html>the above is all the code to use pure css to automatically intercept text effects. you can try it yourself.