Uzun kelimelerin div'ımı kırmasını nasıl önleyebilirim?

TABLO mizanpajından DIV mizanpajına geçildiğinden beri, ortak bir sorun var:

SORUN : DIV'nizi dinamik metinle dolduruyorsunuz ve kaçınılmaz olarak div sütununuzun kenarına yayılan ve sitenizin profesyonel görünmesini sağlayan süper uzun bir kelime var.

RETRO-WHINING : Bu asla masa düzenlerinde olmadı. Bir tablo hücresi her zaman en uzun kelimenin genişliğine kadar genişler.

ŞİDDET : Bu sorunu en büyük sitelerde, özellikle de "hız sınırı" gibi yaygın kelimelerin çok uzun olduğu ("Geschwindigkeitsbegrenzung") Alman sitelerinde bile görüyorum.

Bunun uygulanabilir bir çözümü olan var mı?

Yumuşak kısa çizgi

Yumuşak kısa çizgi ( ­) ekleyerek tarayıcılara uzun sözcüklerin nereye bölüneceğini söyleyebilirsiniz :

averyvery­longword

olarak görüntülenebilir

averyverylongword

veya

averyvery-
longword

Güzel bir düzenli ifade, gerekli olmadıkça bunları eklememenizi sağlayabilir:

/([^\s-]{5})([^\s-]{5})/ → $1­$2

Tarayıcılar ve arama motorları metin ararken bu karakteri yok sayacak kadar akıllıdır ve Chrome ve Firefox (başkalarını test etmediler) metni panoya kopyalarken yok sayar.

<wbr> eleman

Başka bir seçenek, şimdi HTML5'te olan <wbr>eski bir IE-izm enjekte etmektir :

averyvery<wbr>longword

Kısa çizgi olmayan sonlar:

averyvery
longword

Aynı şeyi sıfır genişlikli boşluk karakteri ​(veya &#x200B) ile de elde edebilirsiniz .

FYI ayrıca en son IE, Firefox ve Safari tarafından desteklenen CSShyphens: auto var ( ancak şu anda Chrome'da değil ):

div.breaking {
  hyphens: auto;
}

Ancak, tireleme bir tireleme sözlüğüne dayanır ve uzun sözcükleri kırması garanti edilmez. Doğrulanmış metni daha güzel yapabilir.

Retro sızlanma çözümü

<table>çünkü düzen kötü, ama display:tablediğer unsurlarda iyi. Eski okul masaları kadar ilginç (ve esnek) olacak:

div.breaking {
   display: table-cell;
}

overflowve white-space: pre-wrapaşağıdaki cevaplar da iyidir.

İki düzeltme:

1. overflow:scroll - bu, içeriğinizin tasarım maliyetiyle görünmesini sağlar (kaydırma çubukları çirkin)
2. overflow:hidden- taşmayı keser. Bu, insanların içeriği okuyamayacağı anlamına gelir.

(SO örneğinde) dolgu ile çakışmasını durdurmak istiyorsanız, içeriğinizi tutmak için muhtemelen dolgu içinde başka bir div oluşturmanız gerekir.

Düzenleme: Diğer yanıtlar durumu olarak, istemci tarafında render genişliği çalışma (kelime asla güvenilir bir şekilde, çapraz platform çalışacağı gibi asla bu sunucu tarafı yapmaya çalışın), sözcükleri kısaltmak için çeşitli yöntemler vardır JS ve kesme karakterleri ekleme veya standart olmayan ve / veya çılgınca uyumsuz CSS etiketleri kullanma ( word-wrap: break-word Firefox'ta çalışmıyor gibi görünüyor ).

Yine de her zaman bir taşma tanımlayıcısına ihtiyacınız olacaktır. Div'inizde başka bir çok geniş blok türü içerik parçası (resim, tablo vb.) Varsa, yerleşimi / tasarımı yok etmemesi için taşması gerekir.

Elbette başka bir yöntem (veya bunların bir kombinasyonunu) kullanın, ancak tüm tarayıcıları kapsamak için taşma eklemeyi de unutmayın.

Düzenle 2 (yorumunuzu aşağıda belirtmek için):

CSS overflowözelliğini kullanmaya başlayın mükemmel değil ancak tasarımların bozulmasını durduruyor. overflow:hiddenÖnce uygulayın . Taşmanın dolgu üzerinde kırılmayabileceğini unutmayın, bu nedenle yuva divveya kenarlık kullanın (sizin için en uygun olanı kullanın).

Bu, taşan içeriği gizler ve bu nedenle anlam kaybedebilirsiniz. Kaydırma çubuğu kullanabilirsiniz ( overflow:autoveya overflow:scrollyerine overflow:hidden) kullanabilirsiniz, ancak div'ın boyutlarına ve tasarımınıza bağlı olarak, bu harika görünmeyebilir veya çalışmayabilir.

Bunu düzeltmek için, JS'yi işleri geri çekmek ve bir tür otomatik kesme yapmak için kullanabiliriz. Senin için bazı sahte kodlar yazarken yarı yoldaydım ama yarı yolda ciddi şekilde karmaşıklaşıyor. Mümkün olduğunca göstermeniz gerekiyorsa, tireye bir göz atın ( aşağıda belirtildiği gibi ).

Bunun, kullanıcının CPU'larının maliyeti olduğunu unutmayın. Sayfaların yüklenmesi ve / veya yeniden boyutlandırılması uzun sürebilir.

Bu bildiğimiz gibi karmaşık bir konudur ve tarayıcılar arasında herhangi bir şekilde desteklenmemektedir. Çoğu tarayıcı bu özelliği doğal olarak desteklemez.

Kullanıcı içeriğinin kullanıldığı, ancak komut dosyasının kullanılamadığı (ve CSS bile çok iyi desteklenmediği) HTML e-postalarıyla yapılan bazı çalışmalarda, boşluk bırakılmamış içerik bloğunuzun etrafındaki bir sarıcıdaki aşağıdaki CSS biti en azından biraz yardımcı olmalıdır:

.word-break {
  /* The following styles prevent unbroken strings from breaking the layout */
  width: 300px; /* set to whatever width you need */
  overflow: auto;
  white-space: -moz-pre-wrap; /* Mozilla */
  white-space: -hp-pre-wrap; /* HP printers */
  white-space: -o-pre-wrap; /* Opera 7 */
  white-space: -pre-wrap; /* Opera 4-6 */
  white-space: pre-wrap; /* CSS 2.1 */
  white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
  word-wrap: break-word; /* IE */
  -moz-binding: url('xbl.xml#wordwrap'); /* Firefox (using XBL) */
}

Mozilla tabanlı tarayıcılarda, yukarıda belirtilen XBL dosyası şunları içerir:

<?xml version="1.0" encoding="utf-8"?>
<bindings xmlns="http://www.mozilla.org/xbl" 
          xmlns:html="http://www.w3.org/1999/xhtml">
  <!--
  More information on XBL:
  http://developer.mozilla.org/en/docs/XBL:XBL_1.0_Reference

  Example of implementing the CSS 'word-wrap' feature:
  http://blog.stchur.com/2007/02/22/emulating-css-word-wrap-for-mozillafirefox/
  -->
  <binding id="wordwrap" applyauthorstyles="false">
    <implementation>
      <constructor>
        //<![CDATA[
        var elem = this;

        doWrap();
        elem.addEventListener('overflow', doWrap, false);

        function doWrap() {
          var walker = document.createTreeWalker(elem, NodeFilter.SHOW_TEXT, null, false);
          while (walker.nextNode()) {
            var node = walker.currentNode;
            node.nodeValue = node.nodeValue.split('').join(String.fromCharCode('8203'));
          }
        }
        //]]>
      </constructor>
    </implementation>
  </binding>
</bindings>

Ne yazık ki, Opera 8+ yukarıdaki çözümlerden hoşlanmıyor gibi görünüyor, bu nedenle JavaScript'in bu tarayıcılar (Mozilla / Firefox gibi) için bir çözüm olması gerekecek. Opera'nın sonraki sürümlerini içeren başka bir çapraz tarayıcı çözümü (JavaScript) burada bulunan Hedger Wang'ın senaryosunu kullanmak olurdu: http://www.hedgerwow.com/360/dhtml/css-word-break.html

Diğer faydalı bağlantılar / düşünceler:

Tutarsız Babble »Blog Arşivi» Mozilla / Firefox için CSS kelime sarma taklit
http://blog.stchur.com/2007/02/22/emulating-css-word-wrap-for-mozillafirefox/

[OU] Opera'da kelime kaydırması yok, IE'de iyi görüntüleniyor
http://list.opera.com/pipermail/opera-users/2004-November/024467.html
http://list.opera.com/pipermail/opera- kullanıcılar / 2004-Kasım / 024468.html

CSS Çapraz Tarayıcı Word Wrap

.word_wrap
{
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

Stili kullanın word-break:break-all;. Masalarda çalıştığını biliyorum.

Bunu destekleyen tarayıcılarda word-wrap: break-wordçalışmadığını mı kastediyorsunuz ?

Stil sayfasının gövde tanımına dahil edilirse , belgenin tamamında çalışmalıdır.

Taşma iyi bir çözüm değilse, sadece özel bir javascript yapay olarak uzun kelimeleri kırabilir.

Not: Bu <wbr>Word Break etiketi de vardır . Bu, tarayıcıya satırı ayırabileceği bir nokta verir. Ne yazık ki, <wbr>etiket tüm tarayıcılarda çalışmaz, yalnızca Firefox ve Internet Explorer (ve CSS hileli Opera).

IE 7, Firefox 3.6.8 Mac, Firefox 3.6.8 Windows ve Safari'yi yeni kontrol ettim:

word-wrap: break-word;

ayarlanmış bir genişliği olan ve css'de bildirilen taşma olmayan bir div içindeki uzun bağlantılar için çalışır:

#consumeralerts_leftcol{
    float:left;
    width: 250px;
    margin-bottom:10px;
    word-wrap: break-word;
}

Herhangi bir uyumsuzluk sorunu görmüyorum

Kısa bir süre önce bu sorudan heceleyiciyi öğrendim . Bu sorunu çözebilir.

Çok kavga ettikten sonra, bu benim için işe yaradı:

.pre {
    font-weight: 500;
    font-family: Courier New, monospace;
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: break-all;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

Chrome, Firefox ve Opera'nın en son sürümlerinde çalışır.

white-spaceDiğerlerinin önerdiği özelliklerin çoğunu hariç tuttuğumu unutmayın - bu prebenim için girintiyi kırdı .

Benim için sabit boyutu olmayan ve dinamik içeriğe sahip bir div'de şunu kullanarak çalıştı:

display:table;
word-break:break-all;

Bu yorumda normal ifade , iyi, ama utangaç tire sadece 5 boşluk olmayan veya tire karakter grupları arasında ekler. Bu, son grubun amaçlanandan daha uzun olmasına izin verir, çünkü ondan sonra eşleşen grup yoktur.

Örneğin, bu:

'abcde12345678901234'.replace(/([^\s-]{5})([^\s-]{5})/g, '$1­$2')

... bununla sonuçlanır:

abcde­12345678901234

İşte bu sorunu önlemek için olumlu ileriye dönük bir sürüm:

.replace(/([^\s-]{5})(?=[^\s-])/g, '$1­')

... bu sonuçla:

abcde­12345­67890­1234

Genellikle bu sorun için kullandığım çözüm IE ve diğer tarayıcılar için 2 farklı css kuralı ayarlamaktır:

word-wrap: break-word;

IE'de mükemmel çalışır, ancak word-wrap standart bir CSS özelliği değildir. Microsoft'a özgü bir özelliktir ve Firefox'ta çalışmaz.

Firefox için, sadece CSS kullanarak yapılacak en iyi şey kuralı ayarlamaktır

overflow: hidden;

kaydırmak istediğiniz metni içeren öğe için. Metni sarmaz, metnin kabın sınırını aşan kısmını gizler . Tüm metni görüntülemeniz için gerekli değilse güzel bir çözüm olabilir (örneğin, metin bir <a>etiketin içindeyse )

Güncelleme: Bunu CSS'de ele almak oldukça basit ve düşük ek yüktür, ancak kırılmaların nerede gerçekleştiği konusunda hiçbir kontrolünüz yoktur. Umursamıyorsanız veya verilerinizde herhangi bir doğal ara vermeden uzun alfanümerik çalışmalar varsa sorun olmaz. Çok sayıda uzun dosya yolumuz, URL'miz ve telefon numaramız vardı, bunların hepsinin kırılması diğerlerinden daha iyi yerlere sahip.

Çözümümüz, boşluk olmayan her 15 karakterden (veya araları tercih ettiğimiz özel karakterlerden biri) sonra sıfır genişlikli bir boşluk (& # 8203;) koymak için önce normal ifade yerine kullanmaktı. Daha sonra, bu özel karakterlerin arkasına sıfır genişliğinde bir boşluk koymak için başka bir değişiklik yaparız.

Sıfır genişlikli alanlar güzeldir, çünkü ekranda hiç görünmezler; utangaç tireler gösterdiklerinde kafa karıştırıcıydı, çünkü veriler önemli tirelere sahip. Metni tarayıcıdan kopyaladığınızda sıfır genişlikli alanlar da dahil edilmez.

Şu anda kullandığımız özel kesme karakterleri nokta, eğik çizgi, ters eğik çizgi, virgül, alt çizgi, @, | ve kısa çizgi'dir. Kısa çizgilerden sonra kırılmayı teşvik etmek için herhangi bir şey yapmanız gerekmeyeceğini düşünmezsiniz, ancak Firefox (en az 3.6 ve 4) sayılarla çevrelenmiş tire işaretlerinde (telefon numaraları gibi) kendi başına kırılmaz.

Ayrıca, mevcut düzen alanına göre yapay molalar arasındaki karakter sayısını kontrol etmek istedik. Bu, uzun ve kesintisiz çalışmalarla eşleşecek normal ifadenin dinamik olması gerektiği anlamına geliyordu. Bu çok denir ve performans nedenleriyle aynı özdeş regex'leri tekrar tekrar oluşturmak istemedik, bu nedenle regex ifadesi ve bayrakları ile anahtarlanan basit bir regex önbellek kullandık.

İşte kod; muhtemelen bir yardımcı program paketindeki işlevleri adlandırırsınız:

makeWrappable = function(str, position)
{
    if (!str)
        return '';
    position = position || 15; // default to breaking after 15 chars
    // matches every requested number of chars that's not whitespace or one of the special chars defined below
    var longRunsRegex = cachedRegex('([^\\s\\.\/\\,_@\\|-]{' + position + '})(?=[^\\s\\.\/\\,_@\\|-])', 'g');
    return str
                .replace(longRunsRegex, '$1​') // put a zero-width space every requested number of chars that's not whitespace or a special char
                .replace(makeWrappable.SPECIAL_CHARS_REGEX, '$1​'); // and one after special chars we want to allow breaking after
};
makeWrappable.SPECIAL_CHARS_REGEX = /([\.\/\\,_@\|-])/g; // period, forward slash, backslash, comma, underscore, @, |, hyphen


cachedRegex = function(reString, reFlags)
{
    var key = reString + (reFlags ? ':::' + reFlags : '');
    if (!cachedRegex.cache[key])
        cachedRegex.cache[key] = new RegExp(reString, reFlags);
    return cachedRegex.cache[key];
};
cachedRegex.cache = {};

Bu şekilde test edin:

makeWrappable('12345678901234567890 12345678901234567890 1234567890/1234567890')

2 güncelle: Aslında sıfır genişlikli aralıkların görünür olan en azından bazı durumlarda kopyalanan metninde yer, sadece onları göremez. Açıkçası, insanları gizli karakterleri olan metinleri kopyalamaya teşvik etmek, başka programlara veya sistemlere, hatta kendinize bile, sorunlara neden olabileceği gibi verilerin girilmesi için bir davettir. Örneğin, bir veritabanında sonlanırsa, buna karşı yapılan aramalar başarısız olabilir ve bunun gibi arama dizelerinin de başarısız olması muhtemeldir. Bunun gibi veriler arasında gezinmek için ok tuşlarını kullanmak, göremediğiniz karakter arasında hareket etmek için (doğru olarak) fazladan bir tuşa basmayı gerektirir, kullanıcılar fark ederlerse biraz tuhaftır.

Kapalı bir sistemde, kendinizi korumak için bu karakteri girişe göre filtreleyebilirsiniz, ancak bu diğer programlara ve sistemlere yardımcı olmaz.

Her şey söylendi, bu teknik iyi çalışıyor, ancak kırılmaya neden olan karakterin en iyi seçiminin ne olacağından emin değilim.

Güncelleme 3: Bu karakterin verilere ulaşması artık teorik bir olasılık değil, gözlenen bir problem. Kullanıcılar ekrandan kopyalanan verileri gönderir, db'ye kaydedilir, aralar kesilir, işler garip bir şekilde sıralanır.

İki şey yaptık:

1. Bu uygulama için tüm veri kaynaklarındaki tüm tabloların tüm sütunlarından kaldırmak için bir yardımcı program yazdı.
2. Standart dize giriş işlemcimize kaldırmak için filtreleme eklendi, böylece herhangi bir kod gördüğü zaman gitti.

Bu, tekniğin kendisi gibi iyi çalışır, ancak bu bir uyarıcı masaldır.

Güncelleme 4: Bunu, beslenen verinin HTML'den kaçabileceği bir bağlamda kullanıyoruz. Doğru koşullar altında, HTML varlıklarının ortasına sıfır genişlikli boşluklar ekleyebilir.

Düzeltme, kırılmadığımız karakter listesine, ve işareti eklemekti, şöyle:

var longRunsRegex = cachedRegex('([^&\\s\\.\/\\,_@\\|-]{' + position + '})(?=[^&\\s\\.\/\\,_@\\|-])', 'g');

Sözcük kaydırmanın çalışması için "tablo düzeni: sabit" ayarlanması gerekiyor

HİFENATÖR doğru cevaptır (yukarıda verilmiştir). Sorunuzun arkasındaki asıl sorun, web tarayıcılarının hala (2008'de) tireleme özelliğine sahip olmadıkları konusunda son derece ilkel olmalarıdır. Bakın, hala bilgisayar kullanımının başlangıcındayız - sabırlı olmalıyız. Tasarımcılar web dünyasını yönettikleri sürece, bazı yararlı yeni özellikleri beklemekte zorlanırız.

GÜNCELLEME: Aralık 2011 itibariyle, artık bu etiketlerin FF ve Safari'de ortaya çıkan desteğiyle başka bir seçeneğimiz var:

p {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

Bazı temel testler yaptım ve Mobile Safari ve Safari 5.1.1'in yeni bir sürümü üzerinde çalışıyor gibi görünüyor.

Uyumluluk tablosu: https://developer.mozilla.org/en/CSS/hyphens#AutoCompatibilityTable

IE 8+ ile uyumluluk için:

-ms-word-break: break-all;
     word-break: break-all;

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

-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;

Buraya bakın http://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

Tek yapmam gereken bunu, ayarlanmış bir genişliğe sahip div kabının stiline uygulamaktı.

Bunu kullan

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

Eğer buna sahipseniz -

  <style type="text/css">
      .cell {
            float: left;
            width: 100px;
            border: 1px solid;
            line-height: 1em;
      }
  </style>

  <div class="cell">TopLeft</div>
  <div class="cell">TopMiddlePlusSomeOtherTextWhichMakesItToLong</div>
  <div class="cell">TopRight</div>
  <br/>
  <div class="cell">BottomLeft</div>
  <div class="cell">BottomMiddle</div>
  <div class="cell">bottomRight</div>

div içeren dikey biçime geçin ve CSS'nizde width yerine min-width kullanın -

  <style type="text/css">
      .column {
            float: left;
            min-width: 100px;
      }
      .cell2 {
            border: 1px solid;
            line-height: 1em;
      }
  </style>

  <div class="column">
      <div class="cell2">TopLeft</div>
      <div class="cell2">BottomLeft</div>
  </div>
  <div class="column">
      <div class="cell2">TopMiddlePlusSomeOtherTextWhichMakesItToLong</div>
      <div class="cell2">BottomMiddle</div>
  </div>
  <div class="column">
      <div class="cell2">TopRight</div>
      <div class="cell2">bottomRight</div>
  </div>
  <br/>

Tabii ki, orijinal tablo verileri görüntülüyorsanız, anlamsal olarak doğru olduğu ve gerçekte tablo olması gereken ekran okuyucular kullanan insanları bilgilendireceği için gerçek bir tablo kullanmakta fayda vardır. Bunları, insanların sizi linç edeceği genel düzen veya görüntü dilimleme için kullanıyor.

Aşağıdakileri yapmalıydım, çünkü özellikler doğru sırayla bildirilmezse, kelimeleri yanlış yerde ve bir tire eklemeden rastgele kırardı.

    -moz-white-space: pre-wrap;
white-space: pre-wrap;        
    hyphens: auto;
    -ms-word-break: break-all;
    -ms-word-wrap: break-all;
    -webkit-word-break: break-word;
    -webkit-word-wrap: break-word;
word-break: break-word;
word-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
hyphens: auto;

İlk olarak Enigmo tarafından gönderildi: https://stackoverflow.com/a/14191114

Evet, mümkünse, mutlak bir genişlik ayarlamak ve ayar overflow : autoiyi çalışır.

p {
    overflow-wrap: break-word;
}


@-moz-document url-prefix() { 
    p {
        white-space: -moz-pre-wrap;
        word-wrap: break-word;
    }
}

"word-wrap: break-word" Firefox 3.5'te çalışır http://hacks.mozilla.org/2009/06/word-wrap/

Bunu cssdiv'inize ekleyin:word-wrap: break-word;

tüm kelime tamamlandıktan ve kırıldıktan sonra, taşma düzeyinizi koruyun ve bunun sorununuzu çözüp çözmediğine bakın. div ekranınızı şu şekilde değiştirin:display: inline;

Basit bir işlev (underscore.js gerektirir) - @porneL yanıtına dayalı

    String.prototype.shyBreakString = function(maxLength) {
        var shystring = [];
        _.each(this.split(' '), function(word){
            shystring.push(_.chop(word, maxLength).join('­'));
        });
        return shystring.join(' ');
    };

­İyi satır kesmesi için kelimeye x harfi eklediği yerde harika çalışan bir işlev yazdım . Buradaki tüm yanıtlar tüm tarayıcıları ve cihazları desteklemedi, ancak bu PHP kullanarak iyi çalışıyor:

/**
 * Add line-break to text x characters in
 * @param  string  $text          
 * @param  integer $characters_in 
 * @return string                 
 */
function line_break_text($text, $characters_in = 10) {

    $split = explode(' ', $text);

    if ( ! empty($split)) {

        foreach ($split as $key => $var) {

            if ( strlen($var) > $characters_in ) {

                $split[$key] = substr_replace($var, '­', $characters_in, 0);

            }

        }

    }

    return implode(' ', $split);

}