Katakanlah saya memiliki teks ini yang ingin saya tampilkan dalam sel tabel HTML:
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 Jacksdan saya ingin baris tersebut putus secara istimewa setelah salah satu koma.
Adakah cara untuk memberi tahu perender HTML untuk mencoba melanggar di beberapa tempat yang ditentukan, dan melakukannya terlebih dahulu sebelum mencoba memutuskan setelah salah satu spasi, tanpa menggunakan spasi non-breaking? Jika saya menggunakan spasi non-breaking maka itu membuat lebarnya lebih besar tanpa syarat. Saya ingin jeda baris terjadi setelah salah satu spasi, jika algoritme pembungkusan baris telah mencobanya dengan koma terlebih dahulu dan tidak dapat menyesuaikan baris.
Saya mencoba membungkus fragmen teks dalam <span>elemen tetapi itu tampaknya tidak membantu.
<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>catatan: Sepertinya perilaku CSS3text-wrap: avoid adalah yang saya inginkan, tetapi saya tidak bisa membuatnya berfungsi.
Jawaban:
Dengan menggunakan
dan membungkus teks yang ingin saya simpan bersama
itu akan membungkus pertama dalam blok pilihan dan kemudian dalam fragmen yang lebih kecil sesuai kebutuhan.
sumber
<span>Hello </span><span> world</span>akan menjadiHelloworld, dan<span>Hello</span> <span>world</span>akan menjadi normalHello world.<wbr>tidak menunjukkan tempat yang disukai untuk memutuskan garis, tapi kemungkinan tempat .<span>, sehingga Anda dapat (pada dasarnya) menentukan hierarki titik henti yang diinginkan.Ada solusi RWD yang sangat rapi dari Dan Mall yang saya sukai. Saya akan menambahkannya di sini karena beberapa pertanyaan lain tentang jeda baris responsif ditandai sebagai duplikat dari pertanyaan ini.
Dalam kasus Anda, Anda akan memiliki:
Dan satu baris CSS di kueri media Anda:
sumber
Jawaban yang mudah adalah dengan menggunakan karakter spasi lebar-nol.
​Ini digunakan untuk membuat spasi putus di dalam kata-kata pada titik-titik tertentu .Apakah kebalikan dari spasi non-breaking
(yah, sebenarnya word-joiner⁠) ( word-joiner adalah versi lebar-nol dari spasi non-breaking )(ada juga kode non-breaking lainnya seperti tanda hubung non-breaking
‑) (berikut adalah jawaban ekstensif tentang 'varian' nbsp yang berbeda )Jika Anda menginginkan solusi HTML-only (tanpa CSS / JS), Anda dapat menggunakan kombinasi ruang lebar-nol dan ruang non-breaking , namun ini akan sangat berantakan , dan menulis versi yang dapat dibaca manusia membutuhkan sedikit usaha .
ctrl+ c, ctrl+ vmembantu
contoh:
tidak terbaca? ini adalah HTML yang sama tanpa tag komentar:
Namun, karena rendering html email tidak sepenuhnya terstandarisasi, ini bagus untuk penggunaan semacam itu karena solusi ini tidak menggunakan CSS / JS
Juga, jika Anda menggunakan ini dalam kombinasi dengan salah satu
<span>solusi berbasis, Anda akan memiliki kendali penuh atas algoritme pemutusan garis.(catatan editorial :)
Satu-satunya masalah yang saya lihat adalah jika Anda ingin mengubah titik kerusakan yang diinginkan secara dinamis. Ini akan membutuhkan manipulasi JS yang konstan dari setiap span dengan ukuran proporsional, dan harus menangani entitas HTML tersebut dalam teks.
sumber
Jawabannya adalah tidak ( Anda tidak dapat mengubah algoritma pemutusan garis yang digunakan ).
Tetapi ada beberapa solusi (yang terbaik adalah jawaban yang diterima )
Anda dapat mendekati dengan spasi non-breaking
tetapi hanya antara kata-kata yang menyatu ( apa yang Anda miliki di span, tetapi tidak setelah koma ), atau Anda dapat menggunakanwhite-space:nowrapseperti yang disebutkan @Marcel.Kedua solusi melakukan hal yang sama, dan keduanya tidak akan merusak sekelompok kata jika tidak cocok dengan sendirinya.
sumber
Dengan mark-up Anda di atas digunakan
span { white-space:nowrap }. Ini sebaik yang Anda harapkan.sumber
spanelemen menjadi , dan menjaga agar spasi tidak rusak sama sekali. Saya hanya ingin mencegah perender membobol di antara salah satu item saya, tetapi jika harus, saya ingin melakukannya. <wbr>berbeda dari ruang? Dari apa yang saya tahu, pilihannya adalah karakter tertentu memungkinkan istirahat atau tidak. Jadi '-' dan '' dan​dan<wbr>dan­semua memungkinkan jeda (mencetak tanda hubung, spasi, tidak ada, tidak ada, dan tanda hubung-hanya-saat-putus, masing-masing), sedangkan tidak.Jawaban baru sekarang kami memiliki HTML5:
HTML5 memperkenalkan
<wbr>tag. (Itu singkatan dari Word Break Opportunity.)Menambahkan a
<wbr>memberi tahu browser untuk berhenti di sana sebelum di tempat lain, jadi mudah untuk membuat kata-kata putus setelah koma:Ini mendukung semua browser utama saya selain IE.
sumber
<wbr>memiliki tujuan lain. Belum lagi jawaban ini merupakan duplikat dari jawaban yang sudah ada jauh sebelumnya.<wbr>hanya menyiapkan kesempatan istirahat; itu tidak "memberi tahu browser untuk membobol sana sebelum di mana pun". Digunakan sebelum spasi, biasanya tidak berguna, karena spasi biasanya merupakan peluang jeda baris.<wbr>tidak tidak memprioritaskan satu baris lebih spasi biasa. Jadi pembungkusan terjadi seperti biasa dalam contoh.Anda bisa menyesuaikan pengaturan margin di CSS (margin-right dalam kasus ini).
sumber
Gunakan
<div>sebagai pengganti<span>, atau tentukan kelas untuk SPAN dan berikan atribut display: block .sumber
Ada sebuah elemen HTML untuk ™ yang: (sekarang standar)
<wbr>elemen .Saya menyarankan Anda untuk menggunakannya. Ini mungkin tidak berfungsi di mana-mana , tetapi itu yang terbaik yang dapat Anda lakukan tanpa melalui rintangan.
sumber
<wbr>untuk menandai break point pada kata-kata yang sangat panjang, itu tidak menyelesaikan masalah dengan jeda baris yang diinginkanwbrElemen mewakili peluang jeda baris." Ini adalah persis apa yang diminta OP untuk. Berhentilah merendahkan orang berdasarkan apa yang Anda baca di wiki.<wbr>.