Tata letak teks akan memiliki beberapa persyaratan format tergantung pada bahasa. Misalnya, tanda baca seperti koma dan titik koma dalam bahasa Cina yang disederhanakan tidak akan muncul di awal garis. Untuk bahasa Inggris, kata lengkap tidak akan ditampilkan pada dua baris. Browser akan menampilkan teks berdasarkan prinsip -prinsip seperti ini. Namun, karena halaman web memiliki batasan lebar, huruf kontinu dan panjang, angka atau tanda baca melebihi batas lebar area di mana ia berada, yang mempengaruhi visi halaman, seperti yang ditunjukkan pada Contoh 1. Masalah ini sangat menonjol ketika menampilkan informasi input pengguna. Di sini kita berbicara tentang cara menyelesaikan masalah ini.
Dalam draft CSS3, dua properti baru word-wrap dan word-break ditambahkan ke pemrosesan teks untuk menyelesaikan masalah ini:
Berikut ini adalah situasi dukungan dari browser umum:
| IE6/7 [1] | Firefox2/3 [2] | Opera3+ | Safari9.5+/chrome | |
|---|---|---|---|---|
| {word-wrap: break-word;} | Lebar elemen TD perlu ditetapkan Lihat Contoh 4 dan Contoh 5 | Tidak didukung | Tidak didukung | Tidak mendukung elemen TD Lihat Contoh 4 dan Contoh 5 |
| {Word-Break: Break-all;} | Simbol berkelanjutan tidak didukung Lihat Contoh 3 | Tidak didukung | Tidak didukung | mendukung |
<meta content="IE=7" http-equiv="X-UA-Compatible" /> di header untuk membuat IE8 menafsirkan halaman menurut IE7.Karena {word-break: break-all;} menyebabkan keterbacaan yang parah dari bahasa Inggris dan numerik dan gagal membungkus simbol berturut-turut, {word-wrap: break-word;} adalah pilihan yang relatif baik.
Namun, dalam menghadapi dukungan yang buruk dari browser, kami tidak dapat menyelesaikan masalah ini tanpa menggunakan JavaScript. Yaitu, ketika browser tidak mendukung solusi CSS, masukkan karakter "8203" di posisi yang sesuai dari string kontinu (tentu saja Anda juga dapat menggunakan <wbr /> dan "malu;
function fnBreakWordAll(o){var o = o || {},
iWord = O.Word || 13,
IRE = o.re || '[a-za-z0-9]',
bola = o.all || PALSU,
sclassname = o.classname || 'Word-Break-All',
aels = o.els || (fungsi(){
var aels = [],
aallels = document.geteLementsbyTagname ('*'),
re = regexp baru ('(?:^| // s +)' + sclassname + '(?: // s + | $)');
untuk (var i = 0, ilen = aallels.length; i <ilen; ++ i) {
if (re.test (aallels [i] .className)) {
aels [aels.length] = aallels [i];
}
}
return aels;
}) () || [],
fnbreakword = function (oel) {
// Modifikasi berdasarkan http://www.hedgerwow.com/360/dhtml/css-word-break.html
if (! oel || oel.nodetype! == 1) {
mengembalikan false;
} else if (oel.currentstyle && typeof oel.currentstyle.wordwrap === 'string') {
breakword = function (oel) {
oel.runtimestyle.wordwrap = 'break-word';
Kembali Benar;
}
return breakword (OEL);
} else if (document.createTreeWalker) {
var trim = function (str) {
str = str.replace (/^/s/s*/, '');
var ws = // s/,
i = str.length;
while (ws.test (str.charat (-i)));
return str.slice (0, i + 1);
}
breakword = function (oel) {
var dwalker = document.createTreeWalker (OEL, nodefilter.show_text, null, false);
var node, s, c = string.fromCharCode ('8203'),
// re =/([a-za-z0-9] {0,13})/;
re = regexp baru ('(' + IRE + '{0,' + iWord + '})');
while (dwalker.nextnode ()) {
node = dwalker.currentnode;
s = trim (node.nodevalue) .split (re) .join (c);
node.nodevalue = s;
}
Kembali Benar;
}
return breakword (OEL);
}
};
untuk (var i = 0, n = aels.length; i <n; ++ i) {
var sua = navigator.useragent,
stn = aels [i] .tagname.tolowercase ();
if ((/opera/). test (sua) || (/firefox/).test(sua) || ((/khtml/).test(sua) &&
(stn === 'td' || stn === 'th')) || bola){
fnbreakword (aels [i]);
}
}
}
Untuk aplikasi tertentu, silakan lihat contoh demo
Fungsi FNWordBreakAll menyediakan beberapa parameter yang disesuaikan, dan metode penggunaan dan parameter adalah sebagai berikut:
fnWordBreakAll({word:15,re:'[//w]',all:true});| parameter | nilai | menjelaskan |
|---|---|---|
| Kata | Integer positif, default adalah 13 | Kata -kata dalam jumlah kata ini tidak akan dimasukkan ke dalam /U8203. Tidak banyak kata dengan lebih dari 13 huruf dalam kesan saya, yang dapat memastikan bahwa sebagian besar kata tidak akan rusak |
| ulang | Ekspresi reguler, default [a-za-z0-9] | Ekspresi kata yang teratur untuk menentukan karakter mana yang terdiri dari sebuah kata, perhatikan pelarian / |
| semua | Nilai boolean, false default | Tentukan apakah itu dieksekusi di semua browser, secara default di Opera dan Firefox, dan ketika aplikasi kelas dieksekusi pada Safari di TH atau TD, ini terutama digunakan ketika .Word-break-all tidak ditentukan, itu akan menambah gaya ke IE. |
| ClassName | Nama kelas hukum, word-break-all default | Nama atribut yang sesuai dari elemen fungsi eksekusi |
Bagian inti dari fungsi ini dimodifikasi dari Hedger Wang. Solusi JavaScript "Cross Browser Word Breaker" disusun. Ia menggunakan dokumen.createTreeWalker dan metode split untuk menambahkan "#8203" ke setiap karakter di browser non -e. Pada dasarnya tidak ada masalah ketika digunakan dalam teks Cina murni, tetapi jika Anda mengamati contoh -contoh yang dia berikan, Anda akan menemukan bahwa ketika ada bahasa Inggris atau angka dalam teks, meskipun itu memecahkan masalah lini, membuat teks sulit dibaca dan meningkatkan jarak antar karakter, jadi saya membuat perbaikan di atas berdasarkan ini.