Rumah >hujung hadapan web >tutorial css >Kod pelaksanaan fungsi pemintasan teks CSS
Kod pelaksanaan fungsi pemintasan teks CSS
- WBOYasal
- 2016-05-16 12:05:231874semak imbas
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.
tidak boleh menentukan panjang pemintasan secara automatik Apabila aksara sangat pendek, elips seterusnya akan dijana dalam Firefox.
<!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>Di atas ialah semua kod untuk menggunakan CSS tulen untuk memintas kesan teks secara automatik. Anda boleh mencubanya sendiri.
Kenyataan：
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
Artikel sebelumnya：Siarkan cara penulisan css_Experience exchange yang lebih menyegarkanArtikel seterusnya：Siarkan cara penulisan css_Experience exchange yang lebih menyegarkan