CODEWITHSUNDEEP
htmlcssreactjs
petithomme
petithomme

Reputation: 549

Put title on 2 lines when screen gets too small

I am currently building a react web application using redux. I'm trying to make the page as responsive as possible. At the moment, I have a title at the top that shows:

Actions to do: Past due:

When I lower the size of my page, the title replaces itself depending on the size of the screen as shown below.

1- Actions to do: Past due:

2- Actions to do: Past due:

3- Actions to do: Past due:

I would like to skip the second part and go automatically to 2 separated lines.

my code:

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

In this example, Translate, totalCountDetection, exceedLimit are all variables.

The 2 lines to be separated would be the 2 Translate value=... but only if my screen is small enough for them not to be able to fit on the same line.

Thank you

Upvotes: 0

Views: 188

Answers (3)

petithomme
petithomme

Reputation: 549

For a simpler way if you're using React like me, just wrap your text with style={{ whiteSpace: 'nowrap' }}.

In my previous code, it would look like this:

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

Found this in Adrian Macneil's answer.

If you're not using React, I recommend Axion's answer. It works in React also, I find it just simpler to read by putting it in style.

Upvotes: 0

Axion
Axion

Reputation: 722

Would using a &nbsp; solve this? For instance... 

Actions to do: Past&nbsp;due:

This will make sure the words "Past" and "due" are always together.

Upvotes: 4

Matt
Matt

Reputation: 5428

Group the phrases into span tags and tell the 2nd tag not to wrap. Run code snippet to see it in action.

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

Upvotes: 0

Related Questions