Bisakah CSS memaksa satu baris setelah setiap kata dalam suatu elemen?

Saya sedang membangun situs multibahasa, dengan pemiliknya membantu saya dengan beberapa terjemahan. Beberapa frasa yang ditampilkan memerlukan jeda baris untuk mempertahankan gaya situs.

Sayangnya, pemiliknya bukan orang komputer, jadi jika dia melihat foo<br />barada kemungkinan dia akan mengubah data entah bagaimana saat dia menerjemahkan.

Apakah ada solusi CSS (selain mengubah lebar) untuk diterapkan ke elemen yang akan pecah setelah setiap kata?

(Saya tahu saya bisa melakukan ini dalam PHP, tapi saya bertanya-tanya apakah ada trik bagus yang tidak saya ketahui dalam CSS untuk mencapai hal yang sama, mungkin dalam fitur CJK.)

EDIT

Saya akan mencoba untuk memetakan apa yang terjadi:

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

Kata panjang terputus secara otomatis, kata pendek tidak. Saya ingin terlihat seperti ini:

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

Menggunakan

.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;
}

di mana <parent-width>lebar elemen induk (atau nilai tinggi sewenang-wenang yang tidak masuk ke dalam satu baris). Dengan begitu Anda dapat yakin bahwa bahkan ada jeda setelah satu huruf. Bekerja dengan Chrome / FF / Opera / IE7 + (dan mungkin bahkan IE6 karena mendukung spasi kata).

Jawaban yang diberikan oleh @HursVanBloob hanya berfungsi dengan wadah induk dengan lebar tetap, tetapi gagal jika wadah dengan lebar cairan .

Saya mencoba banyak properti, tetapi tidak ada yang berhasil seperti yang diharapkan. Akhirnya saya sampai pada kesimpulan bahwa memberikan word-spacingnilai yang sangat besar bekerja dengan sangat baik.

p { word-spacing: 9999999px; }

atau, untuk browser modern Anda dapat menggunakan vwunit CSS (lebar visual dalam% dari ukuran layar).

p { word-spacing: 100vw; }

Solusi alternatif dijelaskan pada kalimat terpisah ke satu kata per baris , dengan menerapkan display:table-caption;elemen

Coba gunakan white-space: pre-line;. Itu menciptakan jeda baris di mana pun jeda baris muncul dalam kode, tetapi mengabaikan spasi putih (tab dan spasi dll).

Pertama, tulis kata-kata Anda pada baris terpisah dalam kode Anda:

<div>Short
Word</div>

Kemudian terapkan gaya ke elemen yang mengandung kata-kata.

div { white-space: pre-line; }

Namun hati-hati , setiap jeda baris dalam kode di dalam elemen akan membuat jeda baris. Jadi, menulis yang berikut ini akan menghasilkan jeda baris tambahan sebelum kata pertama dan setelah kata terakhir:

<div>
    Short
    Word
</div>

Ada artikel bagus tentang Trik CSS yang menjelaskan atribut ruang putih lainnya.

Jika Anda ingin dapat memilih dari solusi yang berbeda, di samping jawaban yang diberikan ...

Metode alternatif adalah memberi wadah lebar 0 dan untuk memastikan luapan terlihat. Maka setiap kata akan keluar dari itu dan akan berada di jalurnya sendiri.

div {
  width: 0;
  overflow: visible;
}

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

Atau Anda dapat menggunakan salah satu dari widthnilai - nilai yang baru diusulkan , asalkan masih ada pada saat Anda membaca ini.

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>

Anda tidak dapat menargetkan setiap kata dalam CSS. Namun, dengan sedikit jQuery Anda mungkin bisa.

Dengan jQuery Anda dapat membungkus setiap kata dalam <span>dan kemudian rentang rentang CSS display:blockyang akan menempatkannya pada barisnya sendiri.

Secara teori tentu saja: P

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

Bagi mereka yang mencari solusi yang bekerja dalam wadah orangtua yang fleksibel dengan anak-anak yang fleksibel di kedua dimensi. misalnya. tombol navbar.

//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;
}

Saya menghadapi masalah yang sama, dan tidak ada opsi di sini yang membantu saya. Beberapa layanan email tidak mendukung gaya yang ditentukan. Ini versi saya, yang menyelesaikan masalah dan bekerja di mana saja saya periksa:

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

ATAU menggunakan CSS:

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

Solusi terbaik adalah word-spacingproperti.

Tambahkan <p>dalam wadah dengan ukuran tertentu (contoh 300px) dan setelah itu Anda harus menambahkan ukuran itu sebagai nilai dalam spasi kata.

HTML

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

CSS

div {
 width: 300px;
}

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

Dengan cara ini, kalimat Anda akan selalu rusak dan diatur dalam kolom, tetapi dengan paragraf akan menjadi dinamis.

Berikut contoh Codepen

Dalam kasus saya,

    word-break: break-all;

bekerja dengan baik, semoga membantu pendatang baru lainnya seperti saya.