レスポンシブWebデザインで必要な改行を処理するためのベストプラクティスは何ですか？

私は、販売用またはメール用のシンプルな単一ページのWebアイテムを大量にデザインしています。多くの場合、さまざまなメディア幅で見出しや希望する改行で問題が発生します。

たとえば、次のような見出しを付けることができます。

私たちの新しいthingamabobは、スライスしたパン以来の最高のものです！

改行にまったく注意を払うことなく、改行は次のようになります。

私たちの新しいthingamabobは、
スライスしたパン以来の最高のものです！

Webサイズ全体で、「the」の後に改行を入れたいです。2行を作成します。

私たちの新しいthingamabobは、
スライスしたパン以来の最高のものです！

中程度の幅の画面の場合、2回中断します。

私たちの新しいthingamabob
は、
スライスしたパン以来の最高のものです！

さらに狭い画面の場合は、「new」、「thingamabob」、および「thing」の後に分割します。4行を作成します。

私たちの新しい
thingamabob
は、
スライスしたパン以来の最高のものです！

私は本当に（改行タグを使用したくない<br>）というハード設定するため、すべてのサイズで休憩。今まで私は、様々な用メディアクエリと幅のパーセンテージを使用しましたh1- h5タグ軍ブレークの幅となるようタグ。しかし、これは私にとって「ハッキング」のように思えます（実際のテキストに基づいて、非常に気まぐれでもあります）。

改行をHTMLにハードコーディングせずに制御する最良の方法は何ですか？

これは、段落ではなくテキストの短いスニペットに使用されるということに基づいてのみアドバイスしています。

見出しのフォーマットは合理的な範囲内でできる限り制御できます。JavaScript、または余分な不要な要素は、「合理的な制限」ではありません。

一方、ノンブレイキングスペースは、適度に使用すると便利です。
一緒にしたい単語のペアとトリプレットの間にそれらを配置すると、希望する結果が得られます。

ただし、使用している単語の長さによっては、連続して多くを使用することはできません。リンクが多すぎると、テキストがビューポートまたはそのコンテナから強制的にオーバーフローします。

独自の特定の単語セットを簡単に実験すると、リンクするのに最適な単語が明らかになります。

この質問の例では、HTMLは次のようになります。

<span>Our&nbsp;New thingamabob is&nbsp;the best&nbsp;thing since&nbsp;sliced&nbsp;bread!</span>

ここには実際にはCSSは必要ありません。私が作成したこの例のCSS は、ただの楽しみ用です。

一言で言えば、このメソッドの鍵は、テキストを分割できる場所の数を制限することです。

質問を読み直した後、要件を十分に満たしていないことに気付きました。この特定の場合、および同じ注意を必要とする他のページがあると仮定して、<br>全角ブレークポイントの単一を定義します。次に、見出しの最も理想的な場所にある各ページで同じクラスを再利用します。

この<br>クラスは、メディアクエリを使用して、全角よりも小さいものがあれば、そこにないように折りたたまれます。全幅未満のビューポートサイズでは、のみに依存し ます。

<br>マークに近いシングルの別の例。

HTML：

<span>
    Our&nbsp;New thingamabob is&nbsp;the<br class="full-width-breakpoint"/> best&nbsp;thing since&nbsp;sliced&nbsp;bread!
</span>

CSS：

@media screen and (max-width:550px) {    /* Max Width depends on your design */     
    .full-width-breakpoint {             /* only experimentation or */
        display:none;                    /* calculation will reveal */
        line-height:0;                   /* the best max-width */
    }
}

ベストプラクティスは、Web上の改行を実際に制御できないことを認識し、それを念頭に置いて設計することをお勧めします。

それに反する解決策は、常にハックする必要があります。それは通ります HTMLは外部のハードコーディングのユーザ定義の改行に付着しないようハックすること。あなたはJSでそれをかなり簡単に行うことができました。一意のクラスを持つ空のスパンでブレークポイントを設定し、ビューポートサイズに基づいて、必要な各SPANにBRタグを挿入できます。

新しいブラウザーで動作してブラウザーが行の折り返しを処理する方法を制御するCSSスタイルがいくつかありますが、それでもこの状況で探している正確な制御が得られません。

一方、特定の改行を制御することが目標ではない場合でも、テキストブロックが比較的均等な行で「スタック」するようにするには、各ビューポートでDIVの幅を別々に設定します。完全ではありませんが、かなり近い可能性があり、最良の妥協案となる可能性があります。

そのためのjqueryプラグインBalance Textがあります。

これは、Adobe InDesignのBalance Ragged Lines機能のようにこれを行うCSSオプションを取得するというAdobeの提案text-wrap: balance;と一緒に作成されたAdobe製のプラグインです（すばらしいですが、受け入れられたとしても、ブラウザがサポートするまでには何年もかかります）。

ただし、プラグインは現在機能しています。クラスを持つ要素balance-text、またはjQueryを使用する要素のバランスをとります。$('.some-elements').balanceText();

• 正当なテキストを使用したAdobeの公式デモを次に示します。

• 左揃えのs を使用して作成したデモを<h1>次に示します。コードを表示するには、編集をクリックします。これは、執筆時点での制限の一部を示しています。

制限事項

このコードは現在、インライン要素のないブロックレベルのタグのテキストでのみ機能します。

デモ4では次のようなバランスの取れたテキストのあなたのブロック内の何かわかります<a>リンク、<span>のようなSまたは強調<em>、<strong>、<b>、<i>などが削除されます。

また、デモ1、2、5を比較すると、CSSクラスとjQuery呼び出しの両方を使用する必要があるように見えます。

適度に信頼できるように見えますが、時々不具合があります-執筆中に、サイドコラムにいると時々孤立して孤立した孤児を残しますサイドコラムにあるとき）、そして説明されていない理由のために、私のデモはFirefoxでは動作しませんが、Adobeのデモは動作します（IE9 +ではうまくいき、IE8では今はテストできません）。使用する場合は、テスト時間を考慮してください。

私はこれを幾分定期的に処理する必要があり、デザイナーが特定の方法を壊したいという意見を入力する必要があります。これを行う最も簡単な方法は、テキスト内にクラスを持つスパンを配置display: block;し、そのスパンをメディアクエリ用にすることです。

したがって、次のようになります。

<p>This is some text and I want <span class="mobile-only-line-break">only this text to break, but only on mobile</span></p>

次に、次のようなCSSを使用します。

@media all and (max-width: 767px) {
.mobile-only-line-break { 
display: block;
}
}

すべての幅について、物事があなたの望む方法を確実に破るために、あなたはまだそれを通り抜けて精巧に仕上げなければなりません。

頻繁に問題が発生する場合は、Twitter Bootstrapまたは使用しているグリッドシステムに独自の改行クラスを作成し、使用している命名規則に従ってクラス名をモデル化できます。

JavaScriptを使用して画面幅を検出し、innerHTMLを介して空のdivに正しいバージョン（投稿にあるように<br>を使用）を書き込むことができます。

残念ながら、「望ましいウェブの中断」と「ウェブのベストプラクティス」は両立しません。すべての単語を適切な場所に配置したいという完璧主義者の欲求を手放しましょう。スクリーンの可能性が多すぎ、タイトルの改行を気にしなければならないデザイナーの考え方を持っていない読者が多すぎます。これらの問題をよりよく理解するには、レスポンシブWebデザインをご覧ください。

私の現在の方法...

<h1>Our New thingamabob is the best thing since sliced bread!</h1>

そしてCSS：

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
   h1 { margin: 0 auto; text-align: center; width: 280px; }
}

@media only screen 
and (min-width : 321px) {
    h1 { margin: 0 auto; text-align: center; width: 280px; }
}


@media only screen 
and (max-width : 320px) {
    h1 { margin: 0 auto; text-align: center; width: 280px; }
}


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
    h1 { margin: 0 auto; text-align: center; width: 550px; }
}


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
    h1 { margin: 0 auto; text-align: center; width: 800px; }
}


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
    h1 { margin: 0 auto; text-align: center; width: 550px; }
}


@media only screen 
and (min-width : 1224px) {
    h1 { margin: 0 auto; text-align: center; width: 800px; }
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
    h1 { margin: 0 auto; text-align: center; width: 1200px; }
}


@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
    h1 { margin: 0 auto; text-align: center; width: 280px; }
}

使用される実際のテキストに基づいて幅を調整する必要がある場合がありますが、これは私が使用する一般的なスキームです。基本的にh1タグの幅を減らして、改行したい場所で改行するようにします。

これは機能しますが、必要な箇所でブレークが発生することを確認するために徹底的にテストする必要があります。ただし、いずれにしても、徹底的なテストが必要です。したがって、その点で必ずしもより多くの作業を行う必要はありません。

改行を許可する場所に追加white-space: nowrapして配置でき<wbr>ます。これで十分ではなく、メディアクエリで細かく制御したい場合は、次のようなクラスを追加できます。<wbr class="mobileOnly">

<wbr>doc：https : //developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr