Web sayfalarınızdaki yumuşak kısa çizgilerle ilgili sorunu nasıl çözersiniz? Bir metinde, kısa çizgiyle satır sonunu çizmek isteyebileceğiniz uzun kelimeler olabilir. Ancak tüm kelimenin aynı satırda olması durumunda tire işaretinin gösterilmesini istemezsiniz.

Bu sayfadaki yorumlara göre <wbr>standart dışı bir "Netscape tarafından icat edilen etiket çorbası". ­ Standart uyum ile de sorunları var gibi görünüyor . Tüm tarayıcılar için çalışan bir çözüm elde etmenin bir yolu yok gibi görünüyor .

Yumuşak tireleri ele almanın yolu nedir ve neden seçtiniz? Tercih edilen bir çözüm veya en iyi uygulama var mı?

Ne yazık ki, &shydesteği tarayıcılar arasında o kadar tutarsız ki, gerçekten kullanılamıyor.

QuirksMode doğru - şu anda HTML'de yumuşak tire kullanmanın iyi bir yolu yok. Onlarsız gitmek için neler yapabileceğinizi görün.

2013 edit: QuirksMode'a göre , ­şimdi tüm büyük tarayıcılarda çalışıyor / destekleniyor.

Şubat 2015 özeti (kısmen güncellendi Kasım 2017)

Hepsi oldukça iyi performans gösteriyor, ­Google onu içeren kelimeleri dizine ekleyebilir.

• Tarayıcılarda: ­ ve ­her ikisi de büyük tarayıcılarda (hatta eski IE!) Beklendiği gibi görüntülenir. <wbr>IE'nin son sürümlerinde (10 veya 11) desteklenmez ve Edge'de düzgün çalışmaz.
• Tarayıcılardan kopyalandığında ve yapıştırıldığında: (2015'te test edildi) Mac'te Chrome ve Firefox için ­ve ­Windows'ta (10) beklendiği gibi , karakterleri ve macunları Not Defteri'nde ve görünmez yumuşak tireları destekleyen uygulamalarda tutar. IE (win7) IE10'da bile her zaman tirelerle yapıştırır ve Safari (Mac) kopyaları bazı uygulamalarda (örneğin MS Word) tireler olarak yapışır, ancak diğerleri değil
• Sayfada bul, yalnızca tam kopyalanan ve yapıştırılan eşleşmelerle eşleşen IE hariç tüm tarayıcılarda ­ve ­tarayıcılarda çalışır (IE11'e kadar)
• Arama motorları: Google ­, normal olarak yazılan kelimelerle eşleşen kelimeleri eşleştirir . 2017 itibariyle artık içeren kelimelerle eşleşmiyor gibi görünüyor ­. Yandex aynı olacak. Bing ve Baidu da eşleşmiyor gibi görünüyor.

Dene

Güncel canlı testler için, yumuşak tireli benzersiz kelimelerin bazı örnekleri.

• ­- confumbabbl­ication­ism- uyuşmazlık
  • .................................................. .................................................. .......... confumbabblicationism
  • .................................................. .................................................. .............. confumbabblicationism

<wbr>- donfounbabbl<wbr>ication<wbr>ism. Bu site <wbr/>çıktıdan kaldırılıyor . İşte test için bir jsbin.com snippet'i .

• ­- eonfulbabbl­ication­ism- eonfulbabblicationism
  • .................................................. .................................................. ............. eonfulbabblicationism
  • .................................................. .................................................. ................ eonfulbabblicationism

Burada utangaç tireler yok (bu, sayfadaki bulma testine kopyalamak ve yapıştırmak içindir; arama motoru testlerini kırmayacak şekilde yazılmıştır):

ZZZconfumbabblicationismZZZdonfounbabblicationismZZZeonfulbabblicationismZZZ

Tarayıcılarda görüntüleme

Başarı: belirtilen yerde kırıldığı ve tirdiği zaman, nerede kırılması gerektiği dışında normal bir kelime olarak görüntülenmesi.

Hata: Alışılmadık şekilde görüntülenmesi veya istenen yerde kırılmaması.

• Chrome (40.0.2214.115, Mac): ­başarı, <wbr>başarı, ­başarı
• Firefox (35.0.1, Mac): ­başarı, <wbr>başarı, ­başarı
• Safari (6.1.2, Mac): ­başarı, <wbr> henüz test edilmedi , ­başarı
• Edge (Windows 10): ­başarı, <wbr> başarısız (kesme ama tire yok), ­başarı
• IE11 (Windows 10): ­başarı, <wbr> başarısız (kesinti yok), ­başarı
• IE10 (Windows 10): ­başarı, <wbr> başarısız (kesinti yok), ­başarı
• IE8 (Windows 7): düzensiz - bazen hiçbiri hiç çalışmıyor ve hepsi sadece css'i takip ediyor word-wrap. Bazen hepsi işe yarıyor gibi görünüyor. Nedenine ilişkin henüz net bir model bulunamadı.
• IE7 (Windows 7): ­başarı, <wbr>başarı, ­başarı

Tarayıcılar arasında kopyalayıp yapıştırma

Başarı: Tüm kelimeyi kopyalama ve yapıştırma, tirelenmemiş. (tarayıcı arama, MS Word 2011 ve Sublime Text'e yapıştırma Mac'te test edildi)

Hata: Kısa çizgi, boşluk, satır sonu veya önemsiz karakterlerle yapıştırma.

• Chrome (40.0.2214.115, Mac): ­başarı, <wbr>başarı, ­başarı
• Firefox (35.0.1, Mac): ­başarı, <wbr>başarı, ­başarı
• Safari (6.1.2, Mac): ­ başarısız (tire gibi tüm yapıştırır) MS Word içine, diğer uygulamalarda başarı <wbr> başarısız , ­ başarısız diğer uygulamalarda MS Word'e (tire gibi tüm yapıştırır), başarı
• IE10 (Win7): Tümü kısa çizgiler olarak ­ başarısız pastalar, <wbr> başarısız , hepsi kısa çizgiler olarak ­ başarısız pastalar
• IE8 (Win7): Tümü kısa çizgiler olarak ­ başarısız pastalar, <wbr> başarısız , tüm kısa çizgiler olarak ­ başarısız pastalar
• IE7 (Win7): Tümü kısa çizgiler olarak ­ başarısız pastalar, <wbr> başarısız , hepsi kısa çizgiler olarak ­ başarısız pastalar

Arama motoru eşleşmesi

Kasım 2017'de güncellendi. <wbr>StackOverflow'un CMS'sini çıkardığı için test edilmedi.

Başarı: Tüm, tirelenmemiş kelimedeki aramalar bu sayfayı bulur.

Hata: arama motorları bu sayfayı yalnızca kelimelerin kırık bölümlerini veya kısa çizgileri olan bir kelimeyi ararken bulur.

• Google: ­başarısız, ­başarılı
• Bing: ­başarısız, ­başarısız
• Baidu: ­başarısız, ­başarısız (daha uzun dizelerdeki parçaları eşleştirebilir , ancak kendi başlarına a ­veya içeren kelimelerle eşleşemez ­)
• Yandex: ­başarısız, ­başarılı (% 100 emin değil, Baidu gibi bir dize parçasıyla eşleşmesi mümkün olsa da)

Sayfalarda tarayıcılarda bulma

Arama motoru eşleştirmesi olarak başarı ve başarısızlık.

• Chrome (40.0.2214.115, Mac): ­başarı, <wbr>başarı, ­başarı
• Firefox (35.0.1, Mac): ­başarı, <wbr>başarı, ­başarı
• Safari (6.1.2, Mac): ­başarı, <wbr>başarı, ­başarı
• IE10 (Win7): ­ fail sadece her iki utangaç tire, içerdiğinde maçları <wbr>, başarıyı ­ başarısız yalnızca her iki utangaç tire içerdiğinde maçları
• IE8 (Win7): ­ fail sadece her iki utangaç tire, içerdiğinde maçları <wbr>, başarıyı ­ başarısız yalnızca her iki utangaç tire içerdiğinde maçları
• IE7 (Win7): ­ fail sadece her iki utangaç tire, içerdiğinde maçları <wbr>, başarıyı ­ başarısız yalnızca her iki utangaç tire içerdiğinde maçları

CSS3'te tirelemeyi standartlaştırmak için süregelen bir çaba vardır .

Bazı modern tarayıcılar, özellikle Safari ve Firefox, bunu zaten destekliyor. İşte tarayıcı desteği hakkında iyi ve güncel bir referans .

CSS tireleme evrensel olarak uygulandığında, bu en iyi çözüm olacaktır. Bu arada, metninizi belirli bir tarayıcı için en uygun şekilde tirelemeyi anlayan bir JS betiği olan Hyphenator'u önerebilirim .

Heceleyici:

• LaTeX ve OpenOffice tarafından bilinen Franklin M. Liangs tireleme algoritmasına dayanır .
• kullanılabildiği yerde CSS3 tireleme kullanır,
• ­diğer tarayıcıların çoğuna otomatik olarak eklenir ,
• birden çok dili destekler,
• son derece yapılandırılabilir,
• javascript'in etkin olmaması durumunda geri çekilir.

Ben kullandım ve harika çalışıyor!

Kullandığım ­gerekli yerlerde elle yerleştirilen,.

İnsanların teknik kullanmamalarına üzülüyorum çünkü etraflarında belirtildiği gibi işlemeyen bazı - belki de eski veya garip bir tarayıcı var. ­Hem son Internet Explorer hem de Firefox tarayıcılarında düzgün çalıştığını buldum , bu yeterli olmalı. İnsanlara olgun bir şey kullanmalarını veya garip bir tarayıcıyla gelmeleri durumunda kendi risklerine devam etmelerini söyleyen bir tarayıcı kontrolü ekleyebilirsiniz.

Syllabification o kadar kolay değil ve bazı Javascript'e bırakılmasını tavsiye edemem . Bu dile özgü bir konudur ve metninizi tahriş etmesini istemiyorsanız, masa başı tarafından dikkatli bir şekilde gözden geçirilmesi gerekebilir. Almanca gibi bazı diller bileşik sözcükler oluşturur ve muhtemelen ayrışma sorunlarına yol açar. Örneğin Spargelder( mikrop tasarruflu para, pl.) Heceleme kurallarına göre iki yere sarılabilir ( Spar-gel-der). Bununla birlikte, ikinci pozisyonda sarmak, ilk kısmı Spargel-( mikrop kuşkonmaz) olarak görünecek şekilde döndürür , okuyucunun kafasında tamamen yanıltıcı bir kavramı aktive eder ve bu nedenle kaçınılmalıdır.

Peki ya ip Wachstube? "Bekçi odası" ( Wach-stu-be) veya "balmumu tüpü " ( ) anlamına gelebilir Wachs-tu-be. Muhtemelen başka dillerde de başka örnekler bulabilirsiniz. Her kritik kelimeyi ispatlayarak iyi heceli bir metin oluşturmada masaüstünün desteklenebileceği bir ortam sağlamayı amaçlamalısınız.

HTML5'ten itibaren <wbr>ve ­ aynı şeyi yapması gerekmediğini fark etmek çok önemlidir !

Yumuşak tire

­yumuşak bir tire, yani U + 00AD: SOFT HYPHEN. Örneğin,

innehålls­förteckning

olarak görüntülenebilir

innehållsförteckning

veya gibi

innehålls-
förteckning

Bugün itibariyle, yumuşak tireler Firefox, Chrome ve Internet Explorer'da çalışmaktadır.

wbreleman

wbrEleman bir satır sonu oluşursa bir tire göstermeyecektir bir kelime-break fırsatı sunmasıdır. Örneğin,

ABCDEFG<wbr/>abcdefg

olarak görüntülenebilir

ABCDEFGabcdefg

veya gibi

ABCDEFG
abcdefg

Bugün itibariyle, bu öğe Firefox ve Chrome'da çalışmaktadır.

Sıfır genişlikli boşluklar varlık yerine kullanılabilecek <wbr>güvenilir üzerinde hemen hemen her platformda etiketi.

​

Ayrıca , mola vermek için kullanılabilecek birleştirici varlık kelimesi de yararlıdır . (Mola vermek istediğiniz yer hariç, bir kelimenin her karakteri arasına ekleyin.)

⁠

Bunlardan ikisiyle her şeyi yapabilirsiniz.

Bu, bir süre önce istemcide çalışan ve jQuery kullanarak baktığım bir crossbrowser çözümü:

(function($) { 
  $.fn.breakWords = function() { 
    this.each(function() { 
      if(this.nodeType !== 1) { return; } 

      if(this.currentStyle && typeof this.currentStyle.wordBreak === 'string') { 
        //Lazy Function Definition Pattern, Peter's Blog 
        //From http://peter.michaux.ca/article/3556 
        this.runtimeStyle.wordBreak = 'break-all'; 
      } 
      else if(document.createTreeWalker) { 

        //Faster Trim in Javascript, Flagrant Badassery 
        //http://blog.stevenlevithan.com/archives/faster-trim-javascript 

        var trim = function(str) { 
          str = str.replace(/^\s\s*/, ''); 
          var ws = /\s/, 
          i = str.length; 
          while (ws.test(str.charAt(--i))); 
          return str.slice(0, i + 1); 
        }; 

        //Lazy Function Definition Pattern, Peter's Blog 
        //From http://peter.michaux.ca/article/3556 

        //For Opera, Safari, and Firefox 
        var dWalker = document.createTreeWalker(this, NodeFilter.SHOW_TEXT, null, false); 
        var node,s,c = String.fromCharCode('8203'); 
        while (dWalker.nextNode()) { 
          node = dWalker.currentNode; 
          //we need to trim String otherwise Firefox will display 
          //incorect text-indent with space characters 
          s = trim( node.nodeValue ).split('').join(c); 
          node.nodeValue = s; 
        } 
      } 
    }); 

    return this; 
  }; 
})(jQuery); 

Bu wbrnedenle, kod şöyle yazılabilir kullanmanızı öneririm :

<p>这里有一段很长，很长的<wbr
></wbr>文字；这里有一段</p>

Charaters arasında ­boşluk oluşturmazken, satır sonları tarafından oluşturulan alanları durdurmaz.

Sorunu çözmek için birkaç masaüstü ve mobil tarayıcıda yumuşak tire unicode karakterini başarıyla kullandım .

Unicode sembolü \u00ADgibi Python unicode dizesine eklemek oldukça kolaydır s = u'Языки и методы програм\u00ADми\u00ADро\u00ADва\u00ADния'.

Diğer çözüm, unicode karakterini eklemektir ve kaynak dize, Sublime Text, Kate, Geany, vb.Gibi editörlerde mükemmel sıradan görünecektir (imleç görünmez sembolü hissedecektir).

Şirket içi araçların hex editörleri bu görevi kolayca otomatikleştirebilir.

Kolay bir çamur, ¦kopyalanması ve yapıştırılması kolay olan nadir ve görünür karakterleri kullanmak ve örneğin ön uç komut dosyası kullanarak yumuşak tire üzerine koymaktır $(document).ready(...). Like gibi kaynak kodu s = u'Языки и методы про¦гра¦м¦ми¦ро¦ва¦ния'.replace('¦', u'\u00AD')okumak daha kolaydır s = u'Языки и методы про\u00ADг\u00ADра\u00ADм\u00ADми\u00ADро\u00ADва\u00ADния'.

Varlık ­yerine Unicode dizesini kullanırsanız bazen web tarayıcıları daha bağışlayıcı görünebilir ­.

Kötü şansınız varsa ve hala JSF 1 kullanmak zorundaysanız, tek çözüm & # 173 ;, & shy; çalışmıyor.

<wbr> ve & shy;

Bugün her ikisini de kullanabilirsiniz.

<WBR> kullanımı kırmak için ve daha fazla bilgi koymayın.

Örnek, bağlantıları göstermek için kullanın:

 https://stackoverflow.com/questions/226464/soft-hyphen-in-html-wbr-vs-shy

&utangaç; gerektiğinde bu noktada metin kesilir ve kısa çizgi eklenir.

Misal:

"E im & shy; pos & shy; sí & shy; vel pa & shy; ra um ho & shy; mem a & shy; pren & shy; der a & utangaç

div{
  max-width: 130px;
  border-width: 2px;
  border-style: dashed;
  border-color: #f00;
  padding: 10px;
}

<div>https://<wbr>stackoverflow.com<wbr>/questions/226464<wbr>/soft-hyphen-in-<wbr>html-wbr-vs-shy</div>

<div>É im&shy;pos&shy;sí&shy;vel pa&shy;ra um ho&shy;mem a&shy;pren&shy;der a&shy;qui&shy;lo que ele acha que já sa&shy;be.</div>