HTML'de sözcük kaydırmayı nasıl kapatabilirim?

517

Bunu anlayamadığım için aptal hissediyorum, ama wordwrap'ı nasıl kapatabilirim? css word-wrapözelliği ile zorla edilebilir break-word, ama zorla edilemez kapalı (sadece yalnız bırakılabilir normaldeğeri).

Nasıl sarmak sözcüğü zorlamak kapalı ?

html css word-wrap

— Alexander Kuş
kaynak

852

CSS white-spaceözniteliğini kullanmanız gerekir .

Özellikle white-space: nowrapve white-space: preen sık kullanılan değerlerdir. İlki peşinde olduğun gibi görünüyor.

— Jon
kaynak

25

Yukarıdan eksik webkit'e özgü değerler eklendi

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

— Matas Vaitkevicius
kaynak

3

Acaba neden "beyaz boşluk" u "nowrap" veya "pre" ile çözüm olarak buluyorsunuz, doğru davranışı yapmıyor: metninizi tek bir satıra zorlarsınız! Metin satırları kesmeli, ancak kelimeleri varsayılan olarak kesmemelidir. Bu, bazı css niteliklerinden kaynaklanır: word-wrap, overflow-wrap, word-break ve tire. Böylece şunlardan birine sahip olabilirsiniz:

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

Böylece çözüm bunları kaldırmak veya "unset" veya "normal" ile geçersiz kılmaktır:

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

GÜNCELLEME: JSfiddle ile de kanıt sağlarım: https://jsfiddle.net/azozp8rr/

— Zod
kaynak

1

Genel olarak kelimeleri neden kırmak istediğinizi anlıyorum. Ama kelime sarmayı çevirmek için geçerli bir sebep olmadığını varsaymak benim için anlamlı değil. Hızlı bir şekilde "unset" çözümünü test etmeyi denedim ve hala kelime kaydırma vardı. Çalışması gerektiğini düşünüyorsanız, lütfen çalışmasını sağlayan bir jsfiddle demosu sağlayın.

— Alexander Bird

Cevabımın neden kaybolduğunu bilmiyorum. Yine, nowrap'ı zorlayabilirsiniz, genellikle insanlar bunu düğmeler için yapar. Ama bence bu duyarlı nedenlerle kötü bir tasarım, çünkü metinler konteynerin dışına çıkabilir. Her neyse, soru word-wrap hakkında soruyordu: mola-kelime, zorla ve sen nasıl zorlanacağını soruyordun. Yani, bunu yapmak için kod sağladı. Boşluk: nowrap başka bir şeydir ve kesilen kelimeleri kaldırmıyor, tüm satırları kesiyor. : Ayrıca ben JSfiddle ile kod karşılaştırma sağlayın https://jsfiddle.net/azozp8rr/

— Zod

2

Bu, Chrome textareas'ta aptalca iş molalarının olmasını önlemek için benim için çalıştı

word-break: keep-all;

— Ryan Charmley
kaynak