Rumah > hujung hadapan web > tutorial css > Kod pelaksanaan fungsi pemintasan teks CSS

Kod pelaksanaan fungsi pemintasan teks CSS

WBOY
Lepaskan: 2018-09-27 15:30:57
asal
1876 orang telah melayarinya

Bab ini memperkenalkan anda kepada menggunakan css untuk memintas teks secara automatik, tanpa menggunakan program latar belakang dan JS. Ia mempunyai nilai rujukan tertentu Rakan-rakan yang memerlukan boleh merujuk kepadanya.

Faedahnya ialah:
Serasi dengan IE, firefox, Opera
Kondusif kepada integriti kandungan;
Tidak perlu pemprosesan program latar belakang; bila-bila masa di latar depan untuk memintas panjang.

Kelemahan:

tidak boleh menentukan panjang pemintasan secara automatik Apabila aksara sangat pendek, elips seterusnya akan dijana dalam Firefox.

Selain itu, apabila menetapkan lebar pemintasan, beri perhatian untuk cuba membuat pemintasan teks selesai.

Contoh kod:


<!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>
Salin selepas log masuk
Di atas ialah semua kod untuk menggunakan CSS tulen untuk memintas kesan teks secara automatik. Anda boleh mencubanya sendiri.

Label berkaitan:
css
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan