suchen

Heim  >  Artikel  >  Web-Frontend  >  Implementierungscode für die CSS-Textabfangfunktion

Implementierungscode für die CSS-Textabfangfunktion

WBOY
WBOYOriginal
2016-05-16 12:05:231837Durchsuche

Dieses Kapitel führt Sie in die Verwendung von CSS zum automatischen Abfangen von Text ein, ohne dass Hintergrundprogramme und JS verwendet werden müssen. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Die Vorteile sind:
Kompatibel mit IE, Firefox, Opera;
Förderlich für die Suchmaschinenoptimierung;
Kann angepasst werden jederzeit im Vordergrund, um die Länge abzufangen.

Nachteile:

Die Abfanglänge kann nicht automatisch bestimmt werden. Wenn die Zeichen sehr kurz sind, werden in Firefox nachfolgende Ellipsen generiert.

Achten Sie außerdem beim Festlegen der Abfangbreite darauf, dass das Abfangen des Textes vollständig erfolgt.

Codebeispiel: 


<!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>
Das Obige ist der gesamte Code zur Verwendung von reinem CSS zum automatischen Abfangen von Texteffekten. Sie können es selbst ausprobieren.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Veröffentlichen Sie eine erfrischendere Art, css_Experience Exchange zu schreibenNächster Artikel：Veröffentlichen Sie eine erfrischendere Art, css_Experience Exchange zu schreiben

In Verbindung stehende Artikel

Mehr sehen