Bir DIV'de uzun bir kelimede satır kesmeye nasıl zorlanır?

Tamam, bu gerçekten kafa karıştırıcı. Böyle bir div içinde bazı içerik var:

<div style="background-color: green; width: 200px; height: 300px;">

Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.Thisisatest.

</div>

Bununla birlikte, 'word' çok uzun olduğu için içerik DIV'den (beklendiği gibi) taşar.

Tarayıcıyı içerideki tüm içeriğe uyacak şekilde kelimeyi 'kırmaya' nasıl zorlayabilirim?

kullanım word-wrap:break-word;

Hatta IE6'da da çalışıyor, bu hoş bir sürpriz.

word-wrap: break-word, overflow-wrap: break-word;her modern tarayıcıda çalışan ile değiştirildi . Ölü bir tarayıcı olan IE, sonsuza dek kullanımdan kaldırılmış ve standart dışı bir duruma güvenecektir word-wrap.

word-wrapBugünün mevcut kullanımları hala overflow-wrapşartname başına bir takma ad olduğu için çalışıyor .

Tarayıcı uyumluluğundan emin değilim

word-break: break-all;

Ayrıca <wbr>etiketi kullanabilirsiniz

<wbr>(word break) şu anlama gelir: "İsterse tarayıcı buraya bir satır sonu ekleyebilir." Tarayıcı bir satır sonu gerekli olduğunu düşünmüyor hiçbir şey olmuyor.

Bu, bir 'çapraz tarayıcı' çözümü için kabul edilen cevaba eklenebilir.

Kaynaklar:

• http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/
• http://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

.your_element{
    -ms-word-break: break-all;
    word-break: break-all;

 /* Non standard for webkit */
     word-break: break-word;

    -webkit-hyphens: auto;
       -moz-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;
}

Aynı sorunu sadece Google'da araştırıyordum ve nihai çözümümü BURAYA gönderdim . Bu soru ile de ilgilidir.

Bunu stil vererek bir div ile kolayca yapabilirsiniz word-wrap: break-word(ve genişliğini de ayarlamanız gerekebilir).

div {
    word-wrap: break-word;         /* All browsers since IE 5.5+ */
    overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */
    width: 100%;
}

Ancak, tablolar için , ayrıca uygulamak gerekir: table-layout: fixed. Bu, sütun genişliklerinin artık akışkan olmadığı, ancak yalnızca ilk satırdaki (veya belirtilen genişliklerle) sütun genişliklerine göre tanımlandığı anlamına gelir. Daha fazlasını buradan okuyun .

Basit kod:

table {
    table-layout: fixed;
    width: 100%;
}

table td {
    word-wrap: break-word;         /* All browsers since IE 5.5+ */
    overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */
}

​satır genişliği fırsatını belirten görünmez bir karakter olan sıfır genişlik alanı (ZWSP) adı verilen bir unicode karakterin HTML varlığıdır. Benzer şekilde tirenin amacı bir sözcük sınırı içinde bir satır sonu fırsatı belirlemektir.

Aşağıdakileri kullanmanın, flexbox kullanırken ve güvenirken Firefox (v50.0.2) hariç çoğu büyük tarayıcıda (Chrome, IE, Safari iOS / OSX) çalıştığı bulundu width: auto.

.your_element {
    word-wrap: break-word;   
    overflow-wrap: break-word;
    word-break: break-word;
}

Not: Bir otomatik düzeltici kullanmıyorsanız tarayıcı satıcı önekleri eklemeniz gerekebilir.

Dikkat edilmesi gereken başka bir şey,  boşluk için kullanılan metnin satır ortasında satır sonlarına neden olabilmesidir.

CSS word-wrap:break-word; , FireFox 3.6.3'te test edilmiştir

Aşağıdaki kodla sorunumu çözdüm.

display: table-caption;

Varsa çıkarın white-space: nowrap.

Uygulanışı:

white-space: inherit;
word-break: break-word;

Boşluk tarayıcı tarafından korunur. Metin gerektiğinde kaydırır ve satır sonları

.pre-wrap {
    white-space: pre-wrap;
    word-break: break-word;
}

DEMO

td {
   word-break: break-word;
   white-space: pre-wrap;
   -moz-white-space: pre-wrap;      
}

table {
    width: 100px;
    border: 1px solid black;
    display: block;
}

<table>
<tr><th>list</th>
<td>
1.longtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtextlongtext
2.breaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreaklinebreakline
</td>
</tr>
</table>

Gönderen MDN'yi :

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.

Bunun aksine word-break, overflow-wrapyalnızca bir kelimenin tamamı taşmadan kendi satırına yerleştirilemezse bir ara oluşturur.

Böylece şunları kullanabilirsiniz:

overflow-wrap: break-word;

Kullanabilir miyim ?

İlk önce elemanınızın genişliğini tanımlamanız gerekir. Örneğin:

#sampleDiv{
  width: 80%;
  word-wrap:break-word;
}

<div id="sampleDiv">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

böylece metin eleman genişliğine ulaştığında, satırlara bölünür.

@ Davidcondrey'in cevabında belirtildiği gibi, sadece ZWSP değil, aynı zamanda olmasını istediğiniz ­ ­yerde kırılması gereken çok uzun, inşa edilmiş kelimelerde (Almanca veya Hollandaca düşünün) kullanılabilecek SHY de var. Görünmez, ancak gereken anı bir tireye verir, böylece hem kelimeyi bağlı hem de satırı en üst düzeyde tutar.

Bu şekilde luchthavenpolitieagent kelimesi lucht­haven­politie­agent, hecelerin hecelerinden daha uzun kısımlar olarak belirtilebilir .
Bu konuda hiç resmi bir şey okumamış olmama rağmen, bu yumuşak tireler, tarayıcılarda, yapının tek kelimelerindeki resmi tirelerden daha yüksek önceliğe sahip olmayı başarırlar ( eğer bir uzantısı varsa ).
Uygulamada, hiçbir tarayıcı bu kadar uzun ve yapılandırılmış bir kelimeyi kendi başına kıramaz; daha küçük ekranlarda bunun için yeni bir satırla sonuçlanır, hatta bazı durumlarda tek kelimelik bir satır bile (bu yapılandırılmış kelimelerin ikisinin takip etmesi gibi).

FYI: Havaalanı polis memuru için Hollandaca

word-break: normal, word-break: break-word'ten daha iyi görünüyor, çünkü EN gibi break-word kesiliyor

word-break: normal

Bunu yap:

<div id="sampleDiv">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

#sampleDiv{
   overflow-wrap: break-word;
}

sadece bunu tarzımızda dene

white-space: normal;