CSS, bir öğedeki her sözcükten sonra satır sonunu zorlayabilir mi?

Çok dilli bir site inşa ediyorum, sahibi bana bazı çevirilerde yardımcı oluyor. Görüntülenen ifadelerden bazıları, sitenin stilini korumak için satır sonlarına ihtiyaç duyar.

Ne yazık ki, sahibi bir bilgisayar adamı değil, bu yüzden foo<br />barverileri çevirirken bir şekilde değiştirme şansı olduğunu görürse .

Her kelimeden sonra kırılacak bir öğeye uygulanacak bir CSS çözümü var mı (genişliği değiştirmenin yanı sıra)?

(Bunu PHP'de yapabileceğimi biliyorum, ama belki CJK özelliklerinde aynı şeyi başarmak için CSS'de bilmediğim şık bir numara olup olmadığını merak ediyorum.)

DÜZENLE

Neler olduğunu çizmeye çalışacağım:

----------------          ----------------
| Short Word   |          | Gargantuan   |
|              |          | Word         |
----------------          ----------------

Uzun kelime otomatik olarak kırılır, kısa kelime kesilmez. Bunun gibi görünmesini istiyorum:

----------------          ----------------
| Short        |          | Gargantuan   |
| Word         |          | Word         |
----------------          ----------------

kullanım

.one-word-per-line {
    word-spacing: <parent-width>; 
}

.your-classname{
    width: min-intrinsic;
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
    display: table-caption;
    display: -ms-grid;
    -ms-grid-columns: min-content;
}

burada <parent-width>üst eleman (veya bir satır uymuyor rasgele bir yüksek değer) genişliğidir. Bu şekilde, tek bir harften sonra satır sonu bile olduğundan emin olabilirsiniz. Chrome / FF / Opera / IE7 + ile çalışır (ve kelime aralığını da desteklediğinden muhtemelen IE6 bile).

@HursVanBloob tarafından verilen cevap yalnızca sabit genişlikteki ana kap ile çalışır, ancak akışkan genişlikli kaplarda başarısız olur .

Ben birçok özellik denedim, ama hiçbir şey beklendiği gibi çalıştı. Sonunda word-spacingçok büyük bir değer vermenin gayet iyi çalıştığı sonucuna vardım .

p { word-spacing: 9999999px; }

veya modern tarayıcılar için CSS vwbirimini kullanabilirsiniz (ekran boyutunun% olarak görsel genişliği).

p { word-spacing: 100vw; }

Alternatif bir çözüm açıklanmıştır satıra bir kelime ayrı cümle uygulayarak, display:table-caption;elemana

Kullanmayı deneyin white-space: pre-line;. Kodda bir satır sonu göründüğü yerde satır sonu oluşturur, ancak fazladan boşlukları (sekmeler ve boşluklar vb.) Yok sayar.

İlk olarak, kelimelerinizi kodunuzdaki ayrı satırlara yazın:

<div>Short
Word</div>

Ardından, stili sözcükleri içeren öğeye uygulayın.

div { white-space: pre-line; }

Dikkatli olun da, elemanın içindeki kodda her satır sonu satır sonu yaratacaktır. Yani aşağıdakileri yazmak ilk kelimeden önce ve son kelimeden sonra fazladan bir satır sonu ile sonuçlanır:

<div>
    Short
    Word
</div>

CSS Tricks'te diğer beyaz boşluk özelliklerini açıklayan harika bir makale var .

Verilen cevaplara ek olarak farklı çözümler arasından seçim yapabilmek istiyorsanız ...

Alternatif bir yöntem, kaba 0 genişliğini vermek ve taşmanın görünür olmasını sağlamaktır. Sonra her kelime taşacak ve kendi satırında olacak.

div {
  width: 0;
  overflow: visible;
}

<div>Short Word</div>
<hr>
<div>Gargantuan Word</div>

Veya bunu widthokuduğunuz anda hala mevcut olması koşuluyla, yeni önerilen değerlerden birini kullanabilirsiniz .

div {
  width: min-intrinsic;       /* old Chrome, Safari */
  width: -webkit-min-content; /* less old Chrome, Safari */
  width: -moz-min-content;    /* current Firefox */
  width: min-content;         /* current Chrome, Safari; not IE or Edge */
}

<div>Short Word</div>
<hr>
<div>Gargantuan Word</div>

CSS'deki her kelimeyi hedefleyemezsiniz. Ancak, biraz jQuery ile muhtemelen olabilir.

JQuery ile her bir kelimeyi kendi satırına koyacak bir <span>ve daha sonra CSS küme aralığına sarabilirsiniz display:block.

Teorik olarak: P

https://jsfiddle.net/bm3Lfcod/1/

Her iki boyutta da esnek bir çocukla esnek bir ana kapta çalışan bir çözüm arayanlar için. Örneğin. navbar düğmeleri.

//the parent (example of what it may be)
div {
  display:flex;
  width: 100%;
}

//The children
a {
  display: inline-block;
}

//text wrapper
span {
  display: table-caption;
}

Aynı sorunla karşılaştım ve buradaki seçeneklerin hiçbiri bana yardımcı olmadı. Bazı posta hizmetleri belirtilen stilleri desteklemez. Sorunu çözen ve kontrol ettiğim her yerde çalışan benim sürümüm:

<table>
    <tr>
        <td width="1">Gargantuan Word</td>
    </tr>
</table>

VEYA CSS kullanarak:

<table>
    <tr>
        <td style="width:1px">Gargantuan Word</td>
    </tr>
</table>

En iyi çözüm word-spacingmülkiyettir.

Ekle <p>belirli bir boyutu (örneğin, bir kap içinde 300px) ile bir kelime aralığı değeri olarak bu boyutu eklemek zorunda sonra.

HTML

<div>
 <p>Sentence Here</p>
</div>

CSS

div {
 width: 300px;
}

p {
 width: auto;
 text-align: center;
 word-spacing: 300px;
}

Bu şekilde, cümleniz her zaman kırılır ve bir sütuna yerleştirilir, ancak paragrafın sonu dinamik olacaktır.

İşte bir örnek Codepen

Benim durumumda,

    word-break: break-all;

mükemmel çalıştı, umarım benim gibi yeni gelen herhangi bir yardımcı olur.