ホームページ >ウェブフロントエンド >CSSチュートリアル >
または非改行スペース? " />
優先改行位置の指定
HTML では、通常、改行はスペースまたはカンマで行われます。ただし、強制的に改行したい場合は、特定の位置では、優先改行に優先順位を付ける手法があります。
非改行スペースを使用せずに優先改行位置を指定するには、次のアプローチを利用できます:
CSS クラスを定義します:
<code class="css">span.avoidwrap { display: inline-block; }</code>
このクラスにまとめるテキストをラップします:
<code class="html"><span class="avoidwrap">Text to keep together</span></code>
これ
たとえば、次のコード スニペット:
<code class="html"><html> <head> <style type="text/css"> span.avoidwrap { display: inline-block; } </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 class="avoidwrap">Honey Nut Cheerios, Wheat Chex, Grape-Nuts, Rice Krispies</span> <br /> <span class="avoidwrap">Some random cereal with a very long name, Honey Bunches of Oats, Wheaties, Special K</span> <br /> <span class="avoidwrap">Froot Loops, Apple Jacks</span> </td> <td>lorem ipsum</td> </tr> </table> </div> </body> </html></code>
指定されたカンマの位置で改行が行われ、各インライン ブロック内のテキストが一緒に保持されます。
以上が