Bir <td> içinde boşluk olmadan metni nasıl kaydırırım?

Kullandım:

word-break:break-all;
table-layout:fixed;

ve metin Chrome'da kaydırılır, Firefox'ta değil.

Güncelleme: Tasarımı değiştirmeye karar verdim, böylece sargıya gerek kalmadı; Bir CSS düzeltmesini / hack'ini çözmeye çalışmak çok sinir bozucu ve zaman alıcıydı.

Bunu deneyin, bunun "AAAAAAAAAAAAAAAAAAAAAAARRRRRRRRRRRRRRRRRRRRRRGGGGGGGGGGGGGGGGGGGGG" gibi bir şey için işe yarayacağını düşünüyorum.

AARRRRRRRRRRRRRRRRRRRR
RRGGGGGGGGGGGGGGGGGGGG
G

Örneğimi Google'daki birkaç farklı web sitesinden aldım. Bunu ff 5.0, IE 8.0 ve Chrome 10'da test ettim.

.wrapword {
    white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
    white-space: -webkit-pre-wrap;          /* Chrome & Safari */ 
    white-space: -pre-wrap;                 /* Opera 4-6 */
    white-space: -o-pre-wrap;               /* Opera 7 */
    white-space: pre-wrap;                  /* CSS3 */
    word-wrap: break-word;                  /* Internet Explorer 5.5+ */
    word-break: break-all;
    white-space: normal;
}

<table style="table-layout:fixed; width:400px">
    <tr>
        <td class="wrapword">
        </td>
    </tr>
</table>

CSS3 kullanın word-wrap: break-word;. WebKit tabanlı tarayıcılarda (Safari, Chrome) da çalışır.

Güncelleme : Ancak, söz konusu öğenin sabit öğe olarak örtük veya açık bir şekilde konumlandırılması veya blok öğesi olarak görüntülenmesi gerektiğini unuttum. Tablo hücreleri için ( td) kullanın display: inline-block;.

İşte OP'nin sorduğu şeyin gelişmiş versiyonu.

Bazen olan şey şu ki, müşterimiz bizden kelime molasından sonra satırın sonuna '-' vermemizi istiyor.

Sevmek

AAAAAAAAAAAAAAAAAAAAAAABBBBBBBBBBB

kırmak

AAAAAAAAAAAAAAAAAAAAAAA-
BBBBBBBBB

Dolayısıyla, destekleniyorsa, genellikle en son tarayıcılarda desteklenen yeni CSS özelliği vardır.

.dont-break-out {

  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;

}

Ben bunu kullanıyorum.

Umarım birinin böyle bir talebi olur.

Otomatik bir tablo düzeni için, ilgili td'yi max-width ve word-wrap özelliklerini birleştirerek biçimlendirmeye çalışın.

Örneğin: <td style="max-width:175px; word-wrap:break-word;"> ... </td>

Firefox 32, Chrome 37 ve IE11'de test edilmiştir.

Kesme noktaları oluşturmak için sıfır genişlikteki boşlukları (& # 8203;) manuel olarak enjekte edebilirsiniz.

tdEtiket için bir sütun genişliği ayarlayın .

Bence bu Firefox'ta Mozilla ve Netscape'e geri dönen uzun süredir devam eden bir sorun. Bahse girerim uzun URL'lerin görüntülenmesiyle ilgili sorun yaşıyorsunuzdur. Bence bu, bazı çirkin hackler olmadan CSS ile düzeltebileceğiniz bir şeyden ziyade işleme motoruyla ilgili bir sorun.

Tasarımı değiştirmek mantıklı.

Yine de umut verici görünüyordu: http://hacks.mozilla.org/2009/06/word-wrap/

Projem için Angular kullanıyorum ve bunu basit bir filtre ile çözmeyi başardım:

Şablon:

<td>{{string | wordBreak}}</td>

Filtrele:

app.filter('wordBreak', function() {
    return function(string) {
        return string.replace(/(.{1})/g, '$1​');
    }
})

$1Göremiyorsunuz , ancak sonra , tablo hücreleri için sözcük sonlarını etkinleştiren görünmez bir boşluk (ipucu için @kingjeffrey teşekkürler) var.

Bunu yapmanın biraz hilekar bir yolu, her harf arasına boşluk eklemek için metni işlemektir. Boşlukları ile değiştirin  Ardından boşlukları azaltmak için harf aralığı css özelliğini kullanın.

Biliyorum, bu bir hack ... ama HİÇBİR ŞEY işe yaramazsa, sorunsuz bir şekilde sarmalıdır.