画面が小さくなりすぎるとタイトルが2行に表示されます

私は現在を作成中ですウェブアプリケーションを使用してreduxを使用しています。私はできるだけ反応的なページを作ろうとしています。現時点では、私が示して上部にタイトルを持っている：行うには画面が小さくなりすぎるとタイトルが2行に表示されます

アクション：延滞：

私は私のページのサイズを小さくすると、タイトルがサイズに応じて自分自身を置き換えます次のように画面の

1- Actions to do: Past due:

2- Actions to do: Past due:

3- Actions to do: Past due:

Iは、第二の部分をスキップして2本の分離線に自動的に行きたいです。

私のコード：この例では

return (
    <h3><Translate value='application.my_actions_to_do'/> {totalCountDetection} <p className='ActionPastDue'> {exceedLimit > 0 && <Translate value='application.including' />} {exceedLimit} {exceedLimit > 0 && <Translate value='application.past_due' />} </p></h3> 
);

、は翻訳、totalCountDetection、exceedLimitは、すべての変数です。

2行を区切るには2 変換値= ...ですが、画面が同じ行に収まらない場合は、画面が小さくてもかまいません。

は、spanタグに

出典

2017-06-09 petithomme

あなたのmcveで少し作業したいかもしれません。あなたの問題は本当にjavascriptとは関係がありませんが、HTMLやCSSでもっと反応します。 https://developer.mozilla.org/en-US/docs/Web/CSS/word-break – mkaatman

私の悪いところは、それを変更しました。 – petithomme

 は、この問題を解決する使用しますか？たとえば...

Actions to do: Past&nbsp;due:

これは、「過去」と「納期」の単語が常に一緒になっていることを確認します。

出典

2017-06-09 20:26:37 Axion

Upvoteしかし、私は両方のブロックでこれを行う傾向があります... 'アクション〜は：のために、壊す。 –

うわーは本当にこの答えが大好きです。私の状況では、複数の言語を扱うので、文字列を返す必要があります。文字列に ' 'の値を配置するにはどうすればよいですか？例：Translate変数が 'due due'です。それは '過去 due'である必要がありますが、** js **はそれを認識しません。 – petithomme

私は '$ { } due 'を使ってみましたが、そこには運がありません – petithomme

グループフレーズをありがとうとラップしない第二のタグを教えてください。コードスニペットを実行して実際の動作を確認します。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 

 
    
 
    Default Behavior: 
 
    <div style="width:200px;border:1px solid #000"> 
 
    <span>Actions to do: </span> 
 
    <span>Past due:</span> 
 
    </div> 
 
    <br> 
 
    Behavior I do not want: 
 
    <div style="width:150px;border:1px solid #000"> 
 
    <span>Actions to do: </span> 
 
    <span>Past due:</span> 
 
    </div> 
 
    <br> 
 
    Behavior I want instead: 
 
    <div style="width:150px;border:1px solid #000"> 
 
    <span>Actions to do: </span> 
 
    <span style="white-space:nowrap;">Past due:</span> 
 
    </div> 
 
    
 
</body> 
 
</html>

出典

2017-06-09 19:59:24 mkaatman

このソリューションはうまくいくはずですが、コードが少ない他の解決策はありませんか？ 2つのスパンタグでアクション '：'と ''過去の予定 'をラップして、** due：**を別のラインに置いて、スパン全体をもう一方のラインに置くことができますか？ – petithomme

それは空白ではないのですか？nowrapは何ですか？または私は理解していないのですか？私の例はほんの一例です。誰もあなたのコードをコピー＆ペーストして実行することはできませんが、この答えで実行できます。 – mkaatman

Axionが示唆しているように ' 'を使用するのではなく、これを行う場合は、' アクションを行うことができます： 'とし、CSS' .keep-together {white-space：nowrap; } '。 Scattering 'style =" ... "'は、スタイルシートの目的を完全に打ち消します。それはあなたのページを膨らませます、そして、もしあなたが物をリ・スタイルするならば、それを何百もの場所に変えなければなりません。もしあなたがそうすれば私はあなたのチームからあなたを撃つでしょう。 –

私のようなリアクションを使用している場合は、単純にstyle={{ whiteSpace: 'nowrap' }}でテキストを囲みます。私の以前のコードで

、それは次のようになります。

return (
    <h3><Translate value='application.my_actions_to_do'/> {totalCountDetection} <p className='ActionPastDue' style={{ whiteSpace: 'nowrap' }}> {exceedLimit > 0 && <Translate value='application.including' />} {exceedLimit} {exceedLimit > 0 && <Translate value='application.past_due' />} </p></h3> 
);

はエイドリアン・マクニールのanswerでこれを見つけました。

Reactを使用していない場合は、Axionの回答をお勧めします。 Reactでも動作しますが、のスタイルに入れて読むほうが簡単です。

出典

2017-06-12 17:01:59 petithomme

素晴らしい！本当に助けられた –

画面が小さくなりすぎるとタイトルが2行に表示されます

答えて

関連する問題