Rumah > Artikel > hujung hadapan web > Bagaimana untuk melaksanakan segmentasi perkataan bahasa Inggeris dengan javascript+css
Bagaimana untuk melaksanakan segmentasi perkataan bahasa Inggeris dengan javascript+css
- PHPzasal
- 2023-04-26 10:33:39808semak imbas
Dalam pembangunan web, kami sering menghadapi situasi di mana kandungan terlalu panjang dan tidak dapat dipaparkan sepenuhnya dalam satu baris Dalam kes ini, kami perlu menggunakan teknologi tanda sempang untuk menyelesaikan masalah ini. Pemecahan perkataan merujuk kepada pemisahan perkataan pada kedudukan yang sesuai untuk menyesuaikannya dengan lebar baris semasa, dengan itu mengelakkan limpahan perkataan atau reka letak teks yang jelek. Dalam bahasa Inggeris, sempang biasanya digunakan untuk mewakili pemecah kata, yang dipanggil sempang bahasa Inggeris.
Artikel ini akan memperkenalkan dua kaedah menggunakan javascript dan css untuk mencapai segmentasi perkataan bahasa Inggeris, dan membincangkan kelebihan, kelemahan dan senario yang berkenaan.
1. Gunakan atribut Sempang dalam css
Dalam css3, atribut Sempang baharu ditambahkan untuk mengawal cara pembahagian perkataan. Atribut Sempang menerima tiga nilai:
- tiada: bermaksud tiada pembahagian perkataan;
- manual: bermaksud secara manual menentukan kedudukan pembahagian perkataan; Kenal pasti dan bahagikan perkataan.
- Secara lalai, atribut Sempang tiada. Pembahagian perkataan hanya akan berkuat kuasa apabila auto atau manual ditentukan. Di sini kita akan menumpukan pada nilai auto atribut Sempang.
Selepas menetapkan atribut Sempang kepada auto, penyemak imbas akan secara automatik membahagikan perkataan di lokasi yang sesuai. Walau bagaimanapun, pada masa ini atribut ini hanya disokong oleh beberapa penyemak imbas dan penyemak imbas yang berbeza melaksanakannya secara berbeza.
Khususnya, penyemak imbas berasaskan Safari (seperti Safari dan Chrome) mempunyai sokongan yang agak komprehensif untuk atribut Sempang, tetapi anda perlu menetapkan atribut bahasa (lang) yang sepadan dalam fon dan nyatakan teks dalam html sifat bahasa berfungsi dengan baik. Pelayar seperti Edge dan Firefox mempunyai sokongan yang lemah untuk atribut ini.
Berikut ialah contoh kod css:
2 Gunakan javascript untuk mencapai segmentasi perkataan Inggerisp {
font-size: 16px;
-webkit-hyphens: auto; /* Safari内核浏览器 */
-ms-hyphens: auto; /* Edge浏览器 */
hyphens: auto;
}
Gunakan javascript untuk mencapai segmentasi perkataan Inggeris, terutamanya menggunakan Hyphenator . perpustakaan js. Hyphenator.js melaksanakan pembahagian perkataan bagi perkataan Inggeris berdasarkan algoritma Liang. Algoritma ini bukan sahaja dapat memastikan kesinambungan perkataan, tetapi juga mengelakkan tanda sempang pada penghujung Ia juga boleh melaraskan secara automatik kedudukan sempang mengikut format fon.
Menggunakan perpustakaan Hyphenator.js adalah sangat mudah Anda hanya perlu memperkenalkan fail js dan css yang sepadan ke dalam html dan menambah atribut kelas pada teg yang perlu dibahagikan.
Berikut ialah contoh kod javascript:
Berbanding dengan sifat Sempang dalam css, Hyphenator.js mempunyai sokongan penyemak imbas yang lebih luas dan keupayaan untuk melaraskan sempang secara automatik berdasarkan kedudukan fon, kesan pembahagian perkataan adalah lebih semula jadi. Walau bagaimanapun, menggunakan Hyphenator.js juga mempunyai beberapa kelemahan Ia memerlukan penggunaan fail js tambahan, yang meningkatkan masa muat turun halaman dan apabila menjana rentetan html atau memuatkan kandungan secara dinamik melalui ajax, fungsi Hyphenator.js perlu; dipanggil semula untuk mencapai gangguan.<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hyphenator.js示例</title>
<!-- 引入Hyphenator.js的js和css文件 -->
<script src="Hyphenator.js"></script>
<link rel="stylesheet" href="Hyphenator.css">
<style>
.content {
font-size:16px;
width:200px; /* 宽度为200px */
border: 1px solid #ccc;
padding: 10px;
}
</style>
</head>
<body>
<!-- 带有断词效果的文字 -->
<div class="content hyphenate">This is an example of using Hyphenator.js to hyphenate words properly.</div>
<!-- 初始化 -->
<script>
Hyphenator.config({
displaytogglebox:true, /* 显示开关按钮 */
classname: 'hyphenate', /* 断词class名称 */
hyphenchar: '-', /* 连字符为- */
language: 'en-us', /* 使用英文断词 */
minwordlength : 4 /* 最小断词长度为4 */
});
Hyphenator.run();
</script>
</body>
</html>
Kesimpulan
Artikel ini memperkenalkan dua kaedah penggunaan javascript dan css untuk mencapai segmentasi perkataan Inggeris Setiap satu daripadanya mempunyai beberapa kelebihan dan kekurangan, dan anda perlu memilih mengikut situasi sebenar semasa menggunakan mereka.
Apabila menggunakan atribut Sempang, anda perlu memberi perhatian kepada isu keserasian penyemak imbas, dan juga memberi perhatian untuk menentukan atribut bahasa yang sepadan semasa menggunakan Hyphenator.js, anda perlu memperkenalkan fail js tambahan, yang meningkatkan masa muat turun halaman.
Atas ialah kandungan terperinci Bagaimana untuk melaksanakan segmentasi perkataan bahasa Inggeris dengan javascript+css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!