html(+ css):改行の優先場所を示します


109

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 Jacks

そして、コンマの1つの後で優先的に改行します。

HTMLレンダラーに指定された場所で改行を試みるように指示する方法はありますか。そして、改行しないスペース使用せずに、いずれかのスペースの後で改行を試みる前にそれを行いますか?改行しないスペースを使用すると、無条件に幅が大きくなります。行折り返しアルゴリズムが最初にコンマを使用して行を収めることができなかった場合に、スペースの1つの後に改行を入れたいのですが。

<span>要素でテキストフラグメントをラップしてみましたが、それは役に立たないようです。

<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>

注:CSS3のtext-wrap: avoid動作は私が望んでいるように見えますが、動作させることができません。


スパン内で改行しないスペースを使用できます。
ガブリエレペトリオーリ

3
しかし、私は使用したくない -breakingスペースを。「ブレイクしたくない」のスペースを使いたいのですが、私の知る限りでは、そうしたスペースは存在します。
Jason S

@ジェイソン..私はあなたを感じる..しかしそれは不可能です..答えを追加しました。
ガブリエレペトリオーリ

drat、それはコンピュータ科学者がタイポグラファーからの入力なしでレンダリングアルゴリズムを書くときに起こることです。
Jason S

1
@EggertJóhannessonからの回答は、適切な回避策を提供するため、受け入れる必要があります。
Gabriele Petrioli 2014年

回答:


156

を使用して

span.avoidwrap { display:inline-block; }

そして、一緒に保ちたいテキストをラップします

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

最初に優先ブロックでラップし、次に必要に応じて小さなフラグメントでラップします。


16
よく働く!補足:インラインブロックの最初と最後のスペースは無視されるため、ブロック内のテキストをスペースで区切るには、インラインブロックの間にテキストを配置する必要があります。たとえば、スパンがインラインブロックになるようにスタイル設定されている場合、<span>Hello </span><span> world</span>はでありHelloworld<span>Hello</span> <span>world</span>通常になりますHello world
ユーザーの

2
<wbr>はよりセマンティックであり、ブラウザに制御を任せます。これは一般的に良いことです。この場合、それは重要なときに壊れることを可能にします。
Lodewijk 2014

うまく機能します-重要な場合、「-」のような文字は改行しないでください。例:Perikles <スパンクラス= "avoidwrap">(UM&NBSP; 500から429&NBSP; v.Chr。)</ span>を
サラ・木

10
@Lodewijk:行を分割<wbr>するのに好ましい場所ではなく、可能な場所を示します。
Dan Dascalescu、2015

1
この手法はネストされたに<span>も有効であるため、優先ブレークポイントの階層を(事実上)指定できることに注意してください。
Michael Dyck

24

私が好むDan Mallの非常にきちんとしたRWDソリューションがあります。レスポンシブな改行に関する他のいくつかの質問は、この問題の重複としてマークされているため、ここに追加します。
あなたの場合、あなたは持っているでしょう:

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

そして、メディアクエリのCSSの1行:

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

7

簡単な答えは、ゼロ幅のスペース文字 &#8203;を使用することです。これは、単語内の特定のポイントでブレークスペースを作成するために使用されます。

正反対改行なしスペース &nbsp;(まあ、実際にはワードジョイナー &#8288;)(ワード指物師はのゼロ幅のバージョンである非改行スペースは

(改行しないハイフンの ような他の改行しないコードもあります&#8209;nbspのさまざまな「バリアント」に関する広範な回答があります)

HTMLのみ(CSS / JSなし)のソリューションが必要な場合は、ゼロ幅のスペース改行ないスペースの組み合わせを使用できますが、これは本当に面倒であり、人間が読めるバージョンを作成するには少しの労力が必要です。

ctrl+ cctrl+がv役立つ

例:

   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

読めない?これはコメントタグのない同じHTMLです。

   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

ただし、メールのhtmlレンダリングは完全に標準化されていないため、このソリューションはCSS / JSを使用しないため、そのような用途には適しています

また、これを<span>ベースのソリューションと組み合わせて使用すると、改行アルゴリズムを完全に制御できます

(社説:)

私があなたに持っているのを見ることができる唯一の問題は、あなたが優先的な破損のポイントを動的に変更したいかどうかです。これには、各スパンのサイズに比例した一定のJS操作が必要であり、テキストでこれらのHTMLエンティティを処理する必要があります。


1
スパンハックとは?
Jason S

スパンタグを利用する他の答え。

また、このソリューションは最も単純ではないように見えますが、ブラウザー、電子メールパーサー、またはその他のHTMLパーサー間でこれらのエンティティがセマンティック表現を頻繁に変更することはないため、最も信頼できる方法であることに注意してください。

3

答えはノーです(使用する改行アルゴリズムを変更することはできません)。

しかし、いくつかの回避策があります最良の方法受け入れられた答えです

改行なしのスペースで近づくことができますが、&nbsp;一緒に行く単語の間のみ(スパンにあるものですが、コンマの後にはありません)、またはwhite-space:nowrap@Marcelを言及したように使用できます。

どちらのソリューションは、同じことを行う、との両方がなりません、それはそれ自身に収まらない場合に単語のグループを破ります。


ああ。:-(臭いが、それは私はどちらかそれと一緒に暮らすために持っているか、私は改行アルゴリズムを破るしようとする試みに自分で長い行を検出しようとする必要があることを意味していること。
ジェイソンS

あなたの回答を編集して、回避策へのリンクを提供しました。これは、最初の行の言い回しが原因でほとんど読み続けなかったためです。
arootbeer 2015年

@arootbeer:編集をサポートしますが、Gabyが元に戻しました。ギャビー:なぜ?ユーザーを誤解させたいですか?
Dan Dascalescu、2015

@DanDascalescu、すべての答えは同じページで受け入れられたものを指すように変更すべきですか?私の回答は1(合計)票で、48票の承認済み回答があります。受け入れられたものは注意を引くものだと確信しています(そして当然そうです)。それ以外に、私は使用されている破壊アルゴリズムを変更する方法はないと主張しています(OPが要求する
とおり

1
私の解決策があなたに対してあなた自身のロジックを使用することを確認してください。これをスパンソリューションのいずれかと組み合わせると、改行アルゴリズムを完全に制御できます

2

上記のマークアップを使用しますspan { white-space:nowrap }。あなたが本当に期待できるのと同じくらい良いです。


ありがとうございます。ただし、基本的にはspan要素内のスペースをに変換し&nbsp;、スペースがまったく途切れないため、機能しません。レンダラーがアイテムの1つに介入しないようにしたいのですが、そうする必要がある場合は、そうしたいのです。
Jason S

@ジェイソンS:私は私の答えに他のオプションを追加しました。
Marcel

どのようにある&nbsp;<wbr>スペースよりも何が違いますの?私が言うことができることから、選択は与えられたキャラクターが休憩を許可するか許可しないかのどちらかです。したがって、 '-'と ''および&#8203;and <wbr>&shy;すべては、改行を許可します(それぞれ、ハイフン、スペース、何もない、何もない、およびハイフンのみの改行を出力します)&nbsp;
Jason S

@Jason S:使用例の追加。
マルセル

試してみたところ、改行のためのスペースよりも優先されていないようです。優先順位は私が必要なものです。別の文字または要素の分割動作が「はい」または「いいえ」の場合、問題の解決策はありません。相対的な改行の優先順位がある場合は、解決策があるかもしれません。
Jason S

0

新しい答えがHTML5になりました:

HTML5は<wbr>タグを導入します。(それはワードブレイクの機会を意味します。)

を追加する<wbr>と、他のどこよりも先に改行するようブラウザに指示するため、単語をコンマの後に改行するのは簡単です。

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を除くすべての主要なブラウザーでサポートされています。


12
-1。アドバイスする前になぜテストしなかったのですか?動かない。<wbr>別の目的があります。この回答は、以前から存在していた回答の複製であることは言うまでもありません。
ユーザーの

1
WBRには別の目的はありません。developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr
Lodewijk 2014

13
<wbr>休憩の機会を設けるだけです。「ブラウザに他のどこよりも先に中断するように指示する」ことはありません。スペースは通常改行の機会であるため、スペースの前に使用されますが、通常は役に立ちません。
Jukka K. Korpela 14

5
これは、どのブラウザでもまったく機能しません。答えは間違っ<wbr>ます。通常の空白よりも改行を優先しませ。したがって、例ではラッピングは通常どおりに行われます。
エイドリアン

3
明確にするために、<wbr>は、その位置が単語の内部と見なされる場合に、「ここが壊れる可能性がある場所です」という信号を送ることを目的としています。「ここにスペースがあるかのように、この2つのキャラクターの間のスポットを扱う」とあり、「ここで休憩するのではない」と述べています。すでにスペースがある場合、<wbr>は意味がありません。
セミコロン2017

-1

CSSでマージン設定を調整するだけです(この場合はマージン右)。

text {
    margin-right: 20%;
}


-5

その™のためのHTML要素があります:(現在標準化された)<wbr>要素です。

それを使うことをお勧めします。どこでも機能するわけではありませんが、フープを経由せずにできる最善の方法です。


3
-1:<wbr>非常に長い単語でブレークポイントをマークするためのもので、優先改行の問題は解決しません
ユーザー

4
@ user3075942 仕様から直接の引用:「wbr要素は改行の機会を表します。」これはまさに OPが求めたものです。ウィキで読んだ内容に基づいて、人々の反対投票を停止します。
Mathias Bynens 2014年

3
はい、機会。しかし、ブラウザはすでにスペースで壊れる機会を持っています。問題は、どのスペースでブレークすることが望ましいかをブラウザにどのように伝えるかです。
ユーザーの

1
…そして答えは使用すること<wbr>です。
Mathias Bynens 2014年

8
いいえ、それは答えではありません。特定の既存のブレークポイントの可能性を使用する可能性を高めません。新しいブレークポイントの可能性を追加するだけで、まだ存在していません。連続して2つの可能性があることは役に立ちません。developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr
Torin Finnemann 2014年
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.