Maison >interface Web >tutoriel CSS >Code d'implémentation de la fonction d'interception de texte CSS
Code d'implémentation de la fonction d'interception de texte CSS
- WBOYoriginal
- 2016-05-16 12:05:231874parcourir
Ce chapitre vous présente l'utilisation du CSS pour intercepter automatiquement du texte, sans utiliser de programmes en arrière-plan ni JS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.
Les avantages sont :
Compatible avec IE, Firefox, Opera ;
Facile à l'intégrité du contenu ;
Pas besoin de traitement de programme en arrière-plan
Peut être ajusté ; à tout moment au premier plan pour intercepter la longueur.
Inconvénients :
ne peut pas déterminer automatiquement la longueur de l'interception. Lorsque les caractères sont très courts, des ellipses ultérieures seront générées dans Firefox.
De plus, lors du réglage de la largeur d'interception, veillez à ce que l'interception du texte soit complète.
Exemple de code :
<!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>Ce qui précède est tout le code permettant d'utiliser du CSS pur pour intercepter automatiquement les effets de texte. Vous pouvez l'essayer vous-même.