Bagaimana mematikan pembungkus kata dalam HTML?

517

Saya merasa konyol karena tidak bisa mengetahuinya, tetapi bagaimana cara mematikan kata-kata? css word-wrapproperti dapat dipaksakan dengan break-word, tetapi tidak bisa dipaksa off (hanya dapat dibiarkan sendirian dengan normalnilai).

Bagaimana cara memaksa kata membungkus off ?

html css word-wrap Alexander Bird
sumber

Jawaban:

852

Anda perlu menggunakan white-spaceatribut CSS .

Secara khusus, white-space: nowrapdan white-space: premerupakan nilai yang paling umum digunakan. Yang pertama tampaknya apa yang Anda cari.

Jon
sumber
25

Menambahkan nilai spesifik webkit yang hilang dari atas

white-space: -moz-pre-wrap; /* Firefox */
white-space: -o-pre-wrap; /* Opera */
white-space: pre-wrap; /* Chrome */
word-wrap: break-word; /* IE */
Matas Vaitkevicius
sumber
3

Saya bertanya-tanya mengapa Anda menemukan solusi "white-space" dengan "nowrap" atau "pre", itu tidak melakukan perilaku yang benar: Anda memaksa teks Anda dalam satu baris! Teks harus memecah baris, tetapi tidak memecah kata sebagai default. Ini disebabkan oleh beberapa atribut css: word-wrap, overflow-wrap, word-break, dan tanda hubung. Jadi, Anda dapat memiliki:

word-break: break-all;
word-wrap: break-word;
overflow-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;

Jadi solusinya adalah menghapusnya, atau menimpanya dengan "tidak disetel" atau "normal":

word-break: unset;
word-wrap: unset;
overflow-wrap: unset;
-webkit-hyphens: unset;
-moz-hyphens: unset;
-ms-hyphens: unset;
hyphens: unset;

UPDATE: saya berikan juga bukti dengan JSfiddle: https://jsfiddle.net/azozp8rr/

zod
sumber
1
Saya mengerti mengapa Anda ingin menggunakan kata-kata secara umum. Tetapi untuk berasumsi bahwa tidak ada alasan yang sah untuk mengubah bungkus kata tidak masuk akal bagi saya. Saya dengan cepat mencoba menguji solusi "tidak disetel" Anda, dan masih ada pembungkus kata. Jika menurut Anda itu harus berhasil, harap sediakan demo jsfiddle agar berfungsi.
Alexander Bird
Saya tidak tahu mengapa jawaban saya hilang. Sekali lagi, Anda dapat memaksa memo sekarang, biasanya orang melakukannya untuk tombol. Tetapi saya pikir itu adalah desain yang buruk untuk alasan responsif, karena teks bisa keluar dari wadah. Ngomong-ngomong, pertanyaannya adalah bertanya tentang pembungkusan kata: break-word, terpaksa, dan Anda bertanya bagaimana cara mematikannya. Jadi, saya berikan kode untuk melakukannya. Spasi putih: nowrap adalah hal lain, dan itu tidak menghapus kata-kata yang melanggar, itu menghapus melanggar seluruh baris. Saya juga memberikan perbandingan kode dengan JSfiddle: https://jsfiddle.net/azozp8rr/
zod
2

Ini berhasil bagi saya untuk menghentikan istirahat kerja yang konyol agar tidak terjadi di dalam wilayah teks Chrome

word-break: keep-all;
Ryan Charmley
sumber