html (+ css): satır sonu için tercih edilen bir yeri belirtir

109

Bir HTML tablo hücresinde görüntülemek istediğim bu metne sahip olduğumu varsayalım:

Honey Nut Cheerios, Wheat Chex, Grape-Nuts, Rice Krispies, Some random cereal with a very long name, Honey Bunches of Oats, Wheaties, Special K, Froot Loops, Apple Jacks

ve satırın virgüllerden birinden sonra tercihen kesilmesini istiyorum.

Bazı belirlenen noktada kırılma deneyin ve boşluklar birinin ardından kırmaya denemeden önce ilk yapmanız HTML oluşturucusunu anlamanın bir yolu var mı olmadan olmayan boşluk kullanarak? Bölünmez boşluklar kullanırsam, genişliği koşulsuz olarak büyütür. Ben istiyorum hat-sarma algoritması ilk virgül ile çalıştı ve uyum hattı alamayan eğer satır sonu, boşluk birinden sonra gerçekleşmesi.

Metin parçalarını öğelere kaydırmayı denedim, ancak bu yardımcı bir şey yapmıyor gibi görünüyor.

<html>
  <head>
      <style type="text/css">
        div.box { width: 180px; }
        table, table td { 
          border: 1px solid; 
          border-collapse: collapse; 
        }
      </style>
  </head>
  <body>
    <div class="box">
      <table>
      <tr>
          <td>lorem ipsum</td>
          <td>lorem ipsum</td>
          <td>lorem ipsum</td>
      </tr>
      <tr>
          <td>lorem ipsum</td>
          <td>
            <span>Honey Nut Cheerios,</span>
            <span>Wheat Chex,</span>
            <span>Grape-Nuts,</span>
            <span>Rice Krispies,</span>
            <span>Some random cereal with a very long name,</span>
            <span>Honey Bunches of Oats,</span>
            <span>Wheaties,</span>
            <span>Special K,</span>
            <span>Froot Loops,</span>
            <span>Apple Jacks</span>
          </td>
          <td>lorem ipsum</td>
      </tr>
      </table>
    </div>
  </body>
</html>

not: CSS3text-wrap: avoid davranışı benim istediğim gibi görünüyor, ancak çalışmasını sağlayamıyorum.

html css word-wrap

— Jason S
kaynak

aralıkların içinde bölünmeyen boşluklar kullanabilirsiniz .

— Gabriele Petrioli

3

Ama kullanmak istemiyorum olmayan -breaking boşluk. "Burada kırmak istemiyorum ama gerekirse yapacağım" alanlarını kullanmayı çok isterim, ama bildiğim kadarıyla bunlar var.

— Jason S

@Jason .. seni hissediyorum .. ama bu mümkün değil .. bir cevap ekledi.

— Gabriele Petrioli

drat, bilgisayar bilimcileri tipograflardan girdi olmadan işleme algoritmaları yazdıklarında olan budur.

— Jason S

1

İyi bir geçici çözüm sağladığı için @ EggertJóhannesson'dan gelen yanıtı kabul etmelisiniz!

— Gabriele Petrioli

156

Kullanarak

span.avoidwrap { display:inline-block; }

ve bir arada tutulmasını istediğim metni sarmalamak

<span class="avoidwrap"> Text </span>

önce tercih edilen bloklar halinde ve sonra gerektiğinde daha küçük parçalara sarılacaktır.

— Eggert Jóhannesson
kaynak

16

Harika çalışıyor! Sadece bir ek not: bir satır içi bloğun başlangıcındaki ve sonundaki boşluklar yok sayılır, böylece metni bloklar halinde boşlukla sınırlandırmak için onu satır içi bloklar arasına yerleştirmeniz gerekir. Örneğin, açıklıklar satır içi bloklar Hello worldolacak şekilde biçimlendirildiyse, o zaman olacaktır Helloworldve Hello worldnormal olacaktır Hello world.

— kullanıcı

2

daha anlamsaldır ve kontrolü tarayıcıda bırakır, bu genellikle iyi bir şeydir. Bu durumda, yaşamsal olduğunda kırılmayı mümkün kılar.

— Lodewijk

Harika çalışıyor - önemli olduğunda karakterlerin "-" kırılmaması gibi. Örnek: Perikles (um & nbsp; 500-429 & nbsp; v.Chr.)

— Sarah Trees

10

@Lodewijk: Bir göstermez tercih çizgisini kırmak için yer ama olası bir.

— Dan Dascalescu

1

Bu tekniğin iç içe geçmiş URL'ler için de işe yaradığını unutmayın, bu nedenle (aslında) tercih edilen kesme noktaları hiyerarşisini belirtebilirsiniz .

— Michael Dyck

24

Dan Mall'dan tercih ettiğim çok düzgün bir RWD çözümü var . Bunu buraya ekleyeceğim çünkü duyarlı satır sonlarıyla ilgili diğer bazı sorular bunun kopyaları olarak işaretleniyor.
Senin durumunda sahip olacaksın:

<span>Honey Nut Cheerios, <br class="rwd-break">Wheat Chex, etc.</span>

Ve medya sorgunuzda bir satır CSS:

@media screen and (min-width: 768px) {
    .rwd-break { display: none; }
}

— Stephan Weinhold
kaynak

7

Kolay bir cevap sıfır genişlikli boşluk karakterini kullanmaktır. Kelimelerin içinde belirli noktalarda boşluk bırakmak için kullanılır .

Yapar tam tersi arasında olmayan boşluk   (gerçekte kelime birleştirici ⁠ ) ( kelime birleştirici sıfır genişliği versiyonu olmayan kopma alanı )

(gibi olmayan diğer kırma kodları da vardır bölünemez tire ‑ ) (burada farklı üzerine kapsamlı bir cevaptır arasında 'varyantları' nbsp )

Yalnızca HTML (CSS / JS içermeyen ) bir çözüm istiyorsanız, sıfır genişlikli alan ve bölünmeyen boşluğun bir kombinasyonunu kullanabilirsiniz , ancak bu gerçekten dağınık olur ve insan tarafından okunabilir bir sürüm yazmak biraz çaba gerektirir .

ctrl+ c, ctrl+ vyardımcı olur

misal:

   Honey&nbsp;Nut&nbsp;Cheerios,<!---->&#8203;<!--
-->Wheat&nbsp;Chex,<!---->&#8203;<!--
-->Grape&#8209;Nuts,<!---->&#8203;<!--
-->Rice&nbsp;Krispies,<!---->&#8203;<!--
-->Some&nbsp;random&nbsp;cereal&nbsp;with&nbsp;a&nbsp;very&nbsp;long&nbsp;name,<!---->&#8203;<!--
-->Honey&nbsp;Bunches&nbsp;of&nbsp;Oats,<!---->&#8203;<!--
-->Wheaties,<!---->&#8203;<!--
-->Special&nbsp;K,<!---->&#8203;<!--
-->Froot&nbsp;Loops,<!---->&#8203;<!--
-->Apple&nbsp;Jacks

okunmaz? bu, yorum etiketi olmayan aynı HTML'dir:

   Honey&nbsp;Nut&nbsp;Cheerios,&#8203;Wheat&nbsp;Chex,&#8203;Grape&#8209;Nuts,&#8203;Rice&nbsp;Krispies,&#8203;Some&nbsp;random&nbsp;cereal&nbsp;with&nbsp;a&nbsp;very&nbsp;long&nbsp;name,&#8203;Honey&nbsp;Bunches&nbsp;of&nbsp;Oats,&#8203;Wheaties,&#8203;Special&nbsp;K,&#8203;Froot&nbsp;Loops,&#8203;Apple&nbsp;Jacks

Ancak, e-posta html oluşturma tamamen standartlaştırılmadığından, bu çözüm CSS / JS kullanmadığından bu tür bir kullanım için iyidir.

Ayrıca, bunu tabanlı çözümlerden herhangi biriyle birlikte kullanırsanız , satır kırma algoritmasının tam kontrolüne sahip olacaksınız.

(editör notu :)

Sizi görebildiğim tek sorun, tercih edilen kırılma noktalarını dinamik olarak değiştirmek istemenizdir. Bu, aralıkların orantılı boyutunun her birinin sürekli JS manipülasyonunu ve metindeki bu HTML varlıklarını işlemeyi gerektirecektir.

— Topluluk
kaynak

1

span hacks nedir?

— Jason S

Diğer cevaplar span etiketlerinden yararlanıyor.

Ayrıca şunu da belirtmek isterim ki, bu çözüm en basit gibi görünmese de, en güvenilir olanıdır, çünkü bu varlıklar, tarayıcılar, e-posta ayrıştırıcıları veya diğer herhangi bir HTML ayrıştırıcı arasında anlamsal gösterimi sık sık değiştirmez ve değiştirmemelidir.

3

Cevap hayır ( Kullanılan satır kesme algoritmasını değiştiremezsiniz ).

Ancak bazı geçici çözümler var ( en iyisi kabul edilen cevaptır )

Sen sigara kırma-boşluk yakınında gidebilir  ama sadece birlikte gidip kelimeler arasında ( sen ancak virgülden sonra, açıklıklı ne varsa ) veya kullanabilirsiniz white-space:nowrap@Marcel belirtildiği gibi.

Her iki çözüm de aynı şeyi yapar ve her iki edecektir değil kendi kendine uymuyorsa kelimelerin bir grup bölünürler.

— Gabriele Petrioli
kaynak

argh. :-( bu berbat bir durum, ya onunla yaşamak zorunda olduğum anlamına geliyor ya da satır kırma algoritmasını yenmek için uzun hatları kendi başıma tespit etmeye çalışmam gerekiyor.

— Jason S

Cevabınızı geçici çözüme bir bağlantı sağlamak için düzenledim, çünkü ilk satırınızın ifade edilme şekli nedeniyle neredeyse okumaya devam edemedim.

— arootbeer

@arootbeer: Düzenlemenizi destekliyorum, ancak Gaby bunu geri aldı. Gaby: neden? Kullanıcıları yanıltmak mı istiyorsunuz?

— Dan Dascalescu

@DanDascalescu, tüm yanıtlar SO aynı sayfada kabul edilen yanıtı işaret edecek şekilde değiştirilmeli mi? Cevabımın 1 ( toplam ) oyu var ve 48 oyla kabul edilen bir cevap var. Kabul edilenin dikkat çekenin ( ve haklı olarak ) olduğundan oldukça eminim . Bunun yanı sıra, kullanılan kırma algoritmasını değiştirmenin bir yolu olmadığı konusunda ısrar

— ediyorum

1

çözümümün size karşı kendi mantığınızı kullanması. bunu aralık çözümlerinden herhangi biriyle birleştirdiğinizde, satır kırma algoritmasının tam kontrolüne sahip olursunuz

2

Kullanımınızın üstündeki işaretinizle span { white-space:nowrap }. Gerçekten beklediğiniz kadar iyi.

— Marcel
kaynak

Teşekkürler, ancak bu işe yaramaz çünkü temelde bir spanöğe içindeki boşlukları diline çevirir  ve boşlukların kırılmasını engeller. Sadece oluşturucuyu öğelerimden birinin arasına girmekten vazgeçirmek istiyorum, ancak gerekiyorsa, bunu yapmasını istiyorum.

— Jason S

@Jason S: Cevabıma başka seçenekler ekledim.

— Marcel

 bir uzaydan ne farkı var? Söyleyebileceğim kadarıyla, seçenekler ya verilen bir karakterin bir molaya izin vermesi ya da vermemesidir. Yani '-' ve '' ve ve ve hepsi bir ara vermeye izin verir (sırasıyla bir tire, boşluk, hiçbir şey, hiçbir şey ve yalnızca kesildiğinde kısa çizgi yazdırmak), oysa izin  vermez.

— Jason S

@Jason S: Örnek kullanım eklendi.

— Marcel

Daha yeni denedim ve satır kırmak için boşluklara göre öncelikli görünmüyor. Öncelik ihtiyacım olan şey. Farklı bir karakter veya öğe için kırılma davranışı evet veya hayır ise, sorunum için bir çözüm yok. Göreceli satır kırma öncelikleri varsa, bir çözümüm olabilir.

— Jason S

1

Yeni cevap şimdi HTML5'e sahibiz:

HTML5, etiketi tanıtır . (Kelime Kırma Fırsatı anlamına gelir.)

Bir eklemek , tarayıcıya başka herhangi bir yerden önce orayı kesmesini söyler, bu nedenle kelimelerin virgülden sonra kırılması kolaydır:

Honey Nut Cheerios,<wbr> Wheat Chex,<wbr> Grape-Nuts,<wbr> Rice Krispies,<wbr> Some random cereal with a very long name,<wbr> Honey Bunches of Oats,<wbr> Wheaties,<wbr> Special K,<wbr> Froot Loops,<wbr> Apple Jacks

IE dışındaki tüm büyük tarayıcılarım destekleniyor.

— ACarter
kaynak

12

-1. Neden tavsiye vermeden önce test etmedin? Çalışmıyor. başka bir amacı var. Bu cevabın çok daha önce var olan bir cevabın kopyası olduğundan bahsetmiyorum bile .

— kullanıcı

1

WBR'nin başka bir amacı yoktur. developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr

— Lodewijk

13

sadece bir mola fırsatı yaratır; "tarayıcıya başka herhangi bir yerden önce orayı kırmasını söylemez". Bir boşluktan önce kullanıldığında, normalde faydasızdır, çünkü boşluklar normalde satır sonu fırsatlarıdır.

— Jukka K. Korpela

5

Bu hiçbir tarayıcıda hiç çalışmıyor. Cevap yanlış: yok değil sıradan boşluk üzerinde bir satır sonu öncelik. Yani örtme, örnekte olduğu gibi normal bir şekilde gerçekleşir.

— adrian

3

Açıklığa kavuşturmak gerekirse, , aksi takdirde bir kelime içinde bu konum düşünüldüğünde, "kırabileceğiniz bir yer burasıdır" sinyalini vermeyi amaçlamaktadır . "Burada ayrılmayı tercih et" değil, "bu iki karakter arasındaki noktayı orada bir boşluk varmış gibi ele al" diyor. Zaten boşluk varsa, 'nin anlamı yoktur.

— Noktalı virgül

-1

CSS'de kenar boşluğu ayarlarını yapabilirsiniz (bu durumda kenar boşluğu).

text {
    margin-right: 20%;
}

— gooflord
kaynak

-3

<div>Bunun yerine kullanın veya SPAN için bir sınıf belirtin ve ona display: block niteliğini verin.

— justacoder
kaynak

-5

Bu ™ için bir HTML öğesi var: (artık standartlaştırılmış) öğe .

Bunu kullanmanızı tavsiye ederim. Her yerde işe yaramayabilir , ancak çemberlerden geçmeden yapabileceğiniz en iyisidir.

— Mathias Bynens
kaynak

3

-1: çok uzun kelimelerdeki kesme noktalarını işaretlemek içindir, tercih edilen satır sonları ile sorunu çözmez

— kullanıcı

4

@ dan user3075942 Doğrudan alıntı spec : “ wbröğesi bir satır sonu fırsatı temsil eder.” Bu tam olarak OP'nin istediği şeydi. Wiki'lerde okuduklarınıza göre insanları olumsuz oylamayı bırakın.

— Mathias Bynens

3

Evet, fırsat . Ancak tarayıcılar zaten boşlukları kırma fırsatına sahip. Soru, bir tarayıcıya hangi boşluklarda kırılmasının tercih edildiğinin nasıl söyleneceğidir.

— kullanıcı

1

… Ve cevap kullanmaktır .

— Mathias Bynens

8

Hayır, cevap bu değil. Önceden var olan belirli bir kırılma noktası olasılığının kullanım olasılığını artırmaz; sadece zaten mevcut olmayan yeni bir kırılma noktası olasılığı ekler. Arka arkaya iki olasılığa sahip olmanın hiçbir faydası yoktur. developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr

— Torin Finnemann