Bir div'de uzun kelimeleri kelime sarmanın bir yolu var mı?

173

Internet Explorer'ın bir sözcük kaydırma stili olduğunu biliyorum, ancak bir div içindeki metne bunu yapmanın çapraz tarayıcı yöntemi olup olmadığını bilmek istiyorum.

Tercihen CSS ancak JavaScript snippet'leri de iyi çalışır.

edit: Evet, uzun dizeleri atıfta, millet alkış!

css html word-wrap

— rutherford
kaynak

7

Sözcük kaydırma varsayılan olarak gerçekleşir. Ayrı kelimeler olmadığında sarmak mı demek istiyorsun ?

— Quentin

313

Orijinal yorumu okuyan rutherford, kırılmamış metinleri sarmak için tarayıcılar arası bir yol arıyor (kırılmamış dizeleri kırmak için tasarlanan IE için sözcük kaydırma kullanmasıyla ortaya çıkar).

/* Source: http://snipplr.com/view/10979/css-cross-browser-word-wrap */
.wordwrap { 
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */    
   white-space: -pre-wrap;     /* Opera <7 */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}

Bu sınıfı biraz kullandım ve bir cazibe gibi çalışıyor. (not: Yalnızca FireFox ve IE'de test ettim)

— Aaron Bennett
kaynak

Eski yazı, ancak IE gariplik modundayken boşluk oluşturuyor gibi görünmüyor.

— Jeremy

2

Firefox 24.6.0 kullanıyorum ve word-wrap: break-wordgerçekten işe yarayan şey bu.

— user545424

3

Word-wrap: break-wordMicrosoft tarafından oluşturulan rağmen şimdi CSS 3 standardının bir parçası ve hile ne :-)

— Pascal_dher

38

Önceki yanıtın çoğu Firefox 38.0.5'te benim için çalışmadı. Bu ...

<div style='padding: 3px; width: 130px; word-break: break-all; word-wrap: break-word;'>
    // Content goes here
</div>

Belgeler:

— Paul Zahra
kaynak

2

Teşekkürler! işe

— yarayan

14

white-space: pre-wrap

quirksmode.org/css/whitespace.html

— NVI
kaynak

4

ölü bağlantı. Lütfen daha kapsamlı bir cevap verin.

— JoshYates1980

12

Aaron Bennet'in çözümü benim için mükemmel çalışıyor, ancak kodundan bu satırı kaldırmak zorunda kaldım -> white-space: -pre-wrap;çünkü bir hata veriyordu, bu yüzden son çalışma kodu aşağıdaki:

.wordwrap { 
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
}

çok teşekkür ederim

— Hugo
kaynak

1

Aaron Bennett aynı cevabı sizden 2 yıl önce belirtti. burada yaptığınız değer katmaz.

— AaA

6

Merhaba, her iki yanıtı tekrar okuduğunuzda görebileceğiniz gibi, söylüyorum sadece Aaron'un çözümü iyi, ama yazdığı satırlardan birinde bir hata alıyordum, bu yüzden sadece işe yarayan çözüme değiştirdim ben mi. Belki cevabında yorum yapmalıyım, biliyorum, üzgünüm & teşekkürler

— Hugo

Bu "boşluk: -pre-wrap" eklemek zorunda kaldı ve işe yaradı :)

— Ravi Khambhati

0

David bahseder gibi, DIV'leri yapmak varsayılan olarak sarma kelimeleri.

Boşluksuz metin gerçekten uzun dizeleri atıfta bulunuyorsanız, yaptığım dize sunucu tarafı işlemek ve boş açıklıkları eklemek:

thisIsAreallyLongStringThatIWantTo<span></span>BreakToFitInsideAGivenSpace

Yazı tipi boyutlandırma ve benzeri sorunlar olduğu için kesin değildir. Kap boyutu değişkense span seçeneği çalışır. Sabit genişlikli bir kapsa, devam edip satır sonları ekleyebilirsiniz.

— DA.
kaynak

@TomHert bu çok garip. Yine de, IE. Asla işe yaramıyor. Bununla birlikte, bu 5 yıl önce gönderildi. CSS3 artık IE'nin developer.mozilla.org/en-US/docs/Web/CSS/word-wrap

— DA '

Evet, denemek zorunda olduğum bu çözümün basitliğinden şok oldum :)

— Tom Hert

0

Div için piksel, yüzde veya ems olarak bir genişlik belirtmeyi deneyebilirsiniz ve bu noktada div bu genişlikte kalır ve metin otomatik olarak div içinde kaydırılır.

— Slevin
kaynak

10 piksel genişlik ayarlamayı deneyin ... ve ardından

— Paul Zahra