div dışına akan metin


100

Metin boşluksuz ve 200px div boyutundan fazla olduğunda dışarı akıyor Genişlik 200px olarak tanımlandı Kodumu buraya koydum http://jsfiddle.net/madhu131313/UJ6zG/ Aşağıdaki resimleri düzenlenmiş olarak görebilirsiniz : İstiyorum sonraki satıra gidecek metin

görüntü açıklamasını buraya girin

görüntü açıklamasını buraya girin

Yanıtlar:


180

Bunun nedeni, boşluksuz uzun bir kelimeye sahip olmanızdır. word-wrapMetnin bozulmasına neden olmak için özelliği kullanabilirsiniz :

#w74 { word-wrap: break-word; }

Oldukça iyi bir tarayıcı desteğine de sahip. Bununla ilgili belgelere buradan bakın .


4
benim için işe yaramadı burada başka bir örnek.
Deepak Vaishnav

tbu harika, duyarlı sayfada bazı problemler çözüldü
yussan

Ne kadar temiz ve kolay bir çözüm. Paylaştığın için teşekkürler
Dzenis H.

111

Kullanım

white-space: pre-line;

Metnin div. Metni, öğesinin sonuna geldiğinde kırar div.


28

Sen kullanmalısınız overflow:hidden; veyascroll

http://jsfiddle.net/UJ6zG/1/

veya php ile uzun kelimeleri kısaltabilirsiniz ...


Harika. Gmail sohbeti veya facebook sohbeti gibi bir sonraki satıra gitmesini istediğimi söylediğim için
üzgünüm

O zaman @chipcullen'in sürümünü kelime kaydırmalı olarak kullanabilirsiniz! demo: jsfiddle.net/UJ6zG/3

9

Kap bloğuna (div) aşağıdaki CSS özelliğini uygulamanız gerekir:

overflow-wrap: break-word;

Spesifikasyonlara göre (kaynak CSS | MDN ):

overflow-wrapCSS özellik belirtir olup olmadığını tarayıcı içeriğinin kutu taşan metin önlemek için kelimelerin içinde satır başı eklemek gerekir.

Değer olarak ayarlanmış break-word

Taşmayı önlemek için, satırda başka türlü kabul edilebilir kesme noktaları yoksa, normalde kırılamayan sözcükler rastgele noktalarda kırılabilir.

Bahsetmeye değer...

Özellik başlangıçta standart olmayan ve ön eki olmayan bir Microsoft uzantısıydı word-wrapve aynı ada sahip çoğu tarayıcı tarafından uygulanmıştır. O zamandan beri olarak değiştirilmiştir overflow-wrapile word-wrapbir takma olmak.


Eski tarayıcıların desteğini önemsiyorsanız, ikisini de belirtmeye değer:

word-wrap    : break-word;
overflow-wrap: break-word;

Örn. IE9 tanımıyor overflow-wrapama iyi çalışıyorword-wrap


Teşekkürler, benim için çalıştı. "Dünyayı yıkmak için ayarlanan değerle" yazdınız - eminim "l" olmadan "kırılma sözünü" kastettiniz, umarım dünyayı kırmak istememişsinizdir;)
Jake Neumann

7

kullanmak overflow:autometninize div:) içinde bir kaydırma çubuğu verecektir .


4

Bu yardımcı olursa. Seçicinize değer içeren aşağıdaki özelliği ekleyin:

white-space: pre-wrap;

2

Bu benim için hile yaptı:

{word-break: break-all; }


1
çok teşekkür ederim bu benim için işe
yarayan

0

son zamanlarda bununla karşılaştım. Kullandım:display:block;


-6

Eğer 2 veya 3 satıra sarılması gereken tek bir örnekse <wbr>, dizede sadece birkaçını kullanırdım . Bunlara aynı şekilde davranacaktır <br>, ancak gerekli değilse satır sonunu eklemeyecektir.

<div id="w74" class="dpinfo">
adsfadsadsads<wbr>fadsadsadsfadsadsa<wbr>dsfadsadsadsfadsadsads<wbr>fadsadsadsfadsadsadsfa<wbr>dsadsadsfadsadsadsfadsad<wbr>sadsfadsadsads<wbr>fadsadsadsfadsads adsfadsads
</div>

İşte bir keman.

http://jsfiddle.net/gaby_de_wilde/UJ6zG/37/

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.