Untuk membezakan pembalutan lembut daripada baris baharu yang disimpan, matikan pembalutan perkataan dalam editor teks dan periksa teks asal. Panduan Mac ini menerangkan cara membuat pemeriksaan itu, bagaimana susun atur pelayar boleh mengelirukan anda, dan perkara yang sebenarnya dapat dibuktikan oleh kod yang disalin.

Apakah perbezaan antara pembalutan lembut dengan baris baharu?

Pembalutan lembut berlaku apabila pelayar atau editor memindahkan teks ke baris paparan yang lain agar muat pada lebar yang tersedia. Baris baharu yang disimpan ialah sebahagian daripada teks itu sendiri. W3C membezakan pemisah pembalutan lembut daripada pemisah paksa, yang boleh terhasil daripada aksara baris baharu yang dikekalkan atau sempadan blok. Pemprosesan ruang kosong CSS mengubah persembahan tanpa mengubah data dokumen yang mendasarinya. CSS Text Module Level 3

Perbezaan itu menghasilkan tiga kemungkinan apabila kod kelihatan pada beberapa baris: satu baris logik telah dibalut; teks mengandungi baris logik yang berasingan; atau struktur halaman memaksa pemisah visual. Tangkapan skrin sahaja tidak dapat mengenal pasti kemungkinan yang mana dengan pasti.

Di sini, “baris baharu yang ditulis” bermaksud baris baharu yang terdapat dalam sumber yang sedang diperiksa. Kehadirannya tidak membuktikan siapa yang memasukkannya: pemformat, proses eksport atau transformasi lain mungkin telah menghasilkannya. Tugas praktikalnya ialah menentukan sama ada sempadan itu sebahagian daripada teks atau hanya persembahan semasanya.

Bagaimanakah anda boleh memeriksa kod dalam editor desktop Mac?

Gunakan Visual Studio Code untuk aliran kerja ini. Mulakan dengan fail kod asal jika tersedia. Jika anda hanya mempunyai halaman awam, salin kod yang berkaitan ke dalam dokumen editor yang berasingan, tetapi anggap dokumen itu sebagai bukti teks yang disalin sehingga anda dapat membandingkannya dengan yang asal.

Matikan pembalutan tanpa memformat semula teks

  1. Buka fail atau sampel yang disalin dalam VS Code.
  2. Dengan editor berada dalam fokus, tekan Option+Z untuk menjalankan Toggle Word Wrap.
  3. Perhatikan sama ada sambungan itu bercantum semula dengan baris paparan sebelumnya dan memanjang secara mendatar.
  4. Jika pembalutan sudah dimatikan, togol sekali lagi untuk membandingkan kedua-dua keadaan. Perbezaan antara kedua-dua paparan itulah hasil yang penting.

Microsoft mendokumenkan Option+Z sebagai pintasan macOS lalai untuk Toggle Word Wrap, dengan ID arahan editor.action.toggleWordWrap. Jika pintasan anda berbeza, cari arahan itu dalam editor Keyboard Shortcuts. Rujukan pintasan papan kekunci lalai

Dengan editor.wordWrap ditetapkan kepada on, VS Code membalut teks pada lebar ruang paparan editor. Oleh itu, mematikan pembalutan menghapuskan sambungan visual tersebut. Sempadan yang kekal dalam teks yang tidak diubah ialah sempadan baris logik, bukannya pembalutan lembut editor itu. Penyuntingan asas

Gunakan jadual keputusan ini semasa membandingkan paparan:

Pemerhatian Perkara yang disokong Tindakan seterusnya
Sambungan bercantum semula dengan baris sebelumnya apabila pembalutan dimatikan Sambungan itu ialah pembalutan lembut dalam editor Kekalkan teks tanpa perubahan
Dua baris kekal berasingan apabila pembalutan dimatikan Teks yang diperiksa mengandungi sempadan baris Bandingkan dengan yang asal jika anda memeriksa salinan
Sempadan halaman hilang dalam teks yang disalin Halaman dan perwakilan yang disalin berbeza Periksa teks dan struktur halaman
Sempadan yang disalin kekal, tetapi tiada yang asal tersedia Teks yang disalin mengandungi sempadan itu Biarkan asal usulnya belum dipastikan

Cuba contoh sintetik

Tampal sampel satu baris berikut ke dalam dokumen berasingan. Ini ialah teks JavaScript untuk ilustrasi; anda tidak perlu menjalankannya.

const labels = ["Amber", "Birch", "Cedar", "Dune", "Elm", "Fern", "Grove", "Harbor"];

Kecilkan editor sehingga teks itu terbungkus. Apabila pembalutan dihidupkan, pernyataan itu boleh memenuhi beberapa baris paparan. Matikan pembalutan: pernyataan itu sepatutnya kembali menjadi satu baris logik, walaupun anda perlu menatal secara mendatar untuk membaca penghujungnya.

Sekarang bandingkan dengan versi berbilang baris yang sengaja dibuat seperti berikut:

const labels = [
  "Amber", "Birch", "Cedar", "Dune",
  "Elm", "Fern", "Grove", "Harbor"
];

Keempat-empat baris logik ini kekal berasingan apabila pembalutan dimatikan. Pada lebar yang sempit, mana-mana satu daripadanya juga boleh terbungkus. Inilah perbezaan yang berguna: baris baharu yang disimpan dan pembalutan lembut boleh wujud serentak dalam sampel kod yang sama.

Elakkan daripada memformat dokumen semasa membuat perbandingan. Tujuannya ialah mengubah paparan sambil mengekalkan teks yang diperiksa. Jika tidak, perubahan sempadan baris mungkin berpunca daripada suntingan, bukannya tetapan paparan.

Mengapakah mengubah saiz pelayar hanya ujian awal?

Bayangkan halaman awam abstrak dengan lajur navigasi dan panel kod. Membesarkan tetingkap pelayar mungkin memberi lebih banyak ruang kepada panel. Jika sempadan beralih ke perkataan yang berbeza, itu menyokong penjelasan pembalutan. Namun, jika panel mempunyai lebar tetap, mengubah saiz tetingkap luar mungkin tidak mengubahnya.

Oleh itu, sempadan yang kekal di tempatnya tidak memberikan kesimpulan yang pasti. Pelayar mungkin mengekalkan baris baharu, menemui pemisah struktur, atau membalut dalam panel yang lebar boleh gunanya tidak berubah. Sahkan hasilnya terhadap perwakilan teks dan jangan anggap perubahan saiz tetingkap sebagai bukti.

CSS juga menentukan sama ada baris baharu yang disimpan kelihatan. MDN mendokumenkan nilai lazim ini: sifat CSS white-space

Nilai CSS Pengendalian baris baharu sumber Pembalutan automatik
normal Digabungkan dengan ruang kosong lain Dibenarkan
pre Dikekalkan Dilumpuhkan
pre-wrap Dikekalkan Dibenarkan
pre-line Dikekalkan; ruang dan tab digabungkan Dibenarkan

Oleh itu, pre-wrap boleh memaparkan kedua-dua jenis sempadan serentak, manakala normal boleh menyembunyikan baris baharu sumber. Mematikan pembalutan dengan nowrap tidak memadai sebagai ujian pengekalan sumber kerana ia turut menggabungkan ruang kosong. Untuk blok teks ringkas yang anda kawal, pre ialah perbandingan yang sesuai apabila anda memerlukan ruang kosong dikekalkan tanpa pembalutan automatik. sifat CSS white-space

Bolehkah teks yang disalin mendedahkan baris baharu asal?

Teks yang disalin berguna, tetapi ia merupakan perwakilan yang berasingan. MDN menerangkan innerText sebagai teks terpapar yang menghampiri hasil yang akan diperoleh dengan memilih dan menyalin sesuatu elemen. Sifat ini bertindak balas terhadap rupa yang dipaparkan, termasuk pemisah eksplisit seperti elemen br. Oleh itu, baris baharu dalam sampel yang ditampal tidak dengan sendirinya membuktikan bahawa rentetan kod asal mengandungi baris baharu itu. HTMLElement: sifat innerText

Untuk bekas kod statik yang ringkas, textContent menjawab soalan yang berbeza: sifat ini mengembalikan teks nod dan anak-anaknya, dengan menggabungkan teks anak tanpa menggunakan rupa yang dipaparkan. Sifat ini berguna untuk memeriksa teks DOM, dengan syarat bekas itu benar-benar mengandungi kod yang anda mahu. Node: sifat textContent

Sifat-sifat ini bukan alat pemulihan yang boleh saling menggantikan. Pemisah struktur tidak semestinya baris baharu dalam textContent; sebaliknya, ruang kosong sumber mungkin wujud tanpa kelihatan sebagai pemisah yang dipaparkan. Apabila teks dan susun atur halaman tidak sepadan, nyatakan hasilnya dengan tepat: “teks DOM mengandungi baris baharu,” “susun atur memaksa pemisah,” atau “versi yang disalin mengandungi baris baharu.” Jangan mendakwa lebih daripada yang dapat dibuktikan oleh perwakilan yang diperiksa.

Apakah perubahan dalam editor kod berasaskan pelayar?

Editor pelayar mungkin menyimpan dokumennya secara berasingan daripada elemen yang dipaparkan. Sebagai contoh, dokumentasi sumber rasmi CodeMirror menerangkan baris dokumen melalui model Text: lines mengira baris logik, dan line(n) mendapatkan baris bernombor. Kedudukan to bagi sesuatu baris berada sebelum pemisah baris yang mengikutinya, atau pada penghujung dokumen. Dokumentasi API teks dokumen CodeMirror

CodeMirror juga mendokumenkan bahawa paparannya hanya melukis kod yang kelihatan serta margin sekeliling ke dalam DOM. Sifat lineWrapping menerangkan pembalutan dalam paparan. Oleh itu, mengira baris yang dipaparkan atau mengekstrak DOM editor yang kelihatan tidak mencukupi untuk menentukan baris dalam keseluruhan dokumen. Dokumentasi API paparan editor CodeMirror

Untuk pemeriksaan desktop biasa, gunakan arahan muat turun fail, eksport atau salin yang didokumenkan oleh aplikasi hos apabila tersedia, kemudian periksa hasil itu dengan pembalutan dimatikan. Jika anda menyelenggara integrasi CodeMirror, gunakan model dokumennya untuk menentukan baris logik. API pustaka tidak membuktikan bahawa setiap aplikasi menyediakan kawalan setara kepada pengguna.

Bolehkah borang menambah baris baharu yang tidak pernah ditaip?

Ya. Piawaian HTML WHATWG membezakan nilai API semasa textarea daripada perwakilan hantarannya. Dengan wrap="soft", teks boleh dibalut secara visual tanpa pembalutan tambahan dalam penghantaran. Dengan wrap="hard", perwakilan penghantaran boleh memperoleh pemisah baris; keadaan itu memerlukan cols dinyatakan. Nilai API menormalkan pengakhiran baris kepada LF. Piawaian HTML: Elemen textarea

Perkara ini penting apabila membandingkan teks sebelum dan selepas aliran kerja berasaskan borang. Sempadan yang muncul hanya dalam hasil yang dihantar atau dieksport mungkin berpunca daripada peringkat pemprosesan itu. Periksa perwakilan yang berkaitan dengan tugas anda: teks editor semasa untuk mengenal pasti sempadan yang ditaip, atau fail yang terhasil untuk menentukan perkara yang benar-benar dieksport.

Bagaimanakah anda mengekalkan sempadan pelayar dan pembentukan teks?

Biarkan pembalutan visual diuruskan oleh pelayar atau editor. W3C menetapkan bahawa overflow-wrap: anywhere mengekalkan kelompok grafem bersama-sama dan mengekalkan pembentukan merentasi pembalutan yang diperkenalkan. Membina semula baris dengan memasukkan baris baharu selepas bilangan aksara yang tetap tidak menghasilkan semula peraturan susun atur tersebut. CSS Text Module Level 3

Untuk sampel kod yang mahu anda gunakan semula, dapatkan sumber terbaik yang tersedia dahulu, bandingkan keadaan pembalutan yang dihidupkan dan dimatikan, kemudian kekalkan sempadan baris yang disimpan kecuali jika anda memang mahu menyuntingnya. Jika hanya halaman yang dipaparkan tersedia, catat perkara yang dapat anda pastikan tentang perwakilan itu dan biarkan sempadan yang tidak pasti tanpa kesimpulan. Dengan cara ini, anda mendapat pemeriksaan yang boleh diulang tanpa menjadikan pelarasan paparan sebagai perubahan teks yang tidak disengajakan.

Sumber