Currently, I am in the process of developing a react web application with the assistance of redux. My main objective is to ensure that the page is highly responsive. At this point, there is a title positioned at the top displaying:
Actions to do: Past due:
As I resize my page, the title dynamically adjusts itself based on the screen size, as illustrated below.
1- Actions to do: Past due:
2- Actions to do: Past
due:
3- Actions to do:
Past due:
My goal is to avoid the second scenario where the title spans across two lines and automatically transitions to two separate lines instead.
Snippet from 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 the given example, Translate, totalCountDetection, exceedLimit are all variables being utilized.
The two lines that need to be split are represented by the two Translate value=... but only if the screen size is small enough to prevent them from fitting on the same line.
Thank you