Question

我目前正在使用 redux 构建反应 Web应用程序。我正在努力使页面尽可能响应。目前，我在顶部有一个标题显示：

要采取的措施：逾期：

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

1- Actions to do: Past due:

2- Actions to do: Past due:

3- Actions to do: Past due:

我想跳过第二部分并自动转到两行。

我的代码：

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 ， beyondLimit 都是变量。

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

谢谢

Answer 1

使用 会解决这个问题吗？例如......

Actions to do: Past&nbsp;due:

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

Answer 2

将短语分组为span标签，并告诉第二个标签不要换行。运行代码段以查看其实际效果。

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

Answer 3

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.

当屏幕太小时，将标题放在2行

3 个答案: