html - 当屏幕太小时将标题放在两行

Question

我目前正在使用 redux 构建一个 react 网络应用程序。我正在尝试使页面尽可能具有响应性。目前，我在顶部有一个标题显示:

要执行的操作:逾期:

当我减小页面大小时，标题会根据屏幕大小自行替换，如下所示。

1- 要执行的操作:逾期:

2- 要执行的操作:过去
由于:

3- 要执行的操作:
逾期:

我想跳过第二部分并自动转到 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>
  );

在这个例子中，Translate、totalCountDetection、exceedLimit都是变量。

要分隔的 2 行将是 2 Translate value=... 但前提是我的屏幕足够小以至于它们无法放在同一行上。

谢谢

Answer 1

使用   可以解决这个问题吗？比如……

Actions to do: Past due:

这将确保“过去”和“到期”这两个词始终在一起。