Question

我正在尝试使用span和nowrap，并且我在vanilla JS和React中获得了不同的结果。

例如，使用此css：

span {
  white-space: nowrap;
}

在常规javascript中使用它：

<div>
    <span> lorem ipsum dolor </span>
    <span> lorem ipsum dolor </span>
    <span> lorem ipsum dolor </span>
</div>

VS

class App extends React.Component{
  render() {
    return (
      <div>
        <span> lorem ipsum lorem ipsum </span>
        <span> lorem ipsum lorem ipsum </span>
        <span> lorem ipsum lorem ipsum </span>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

在React中，它不会将范围包装到下一行。这是一个错误还是预期会有不同的行为？我如何得到模仿css行为的反应。

在React中，它永远不会包装。在Vanilla JS中，它将每个语句包装为一个块，这是期望的行为。

（已编辑）jsbin＆＃39; s供参考：

1）https://jsbin.com/zuwonirape/edit?html,css,js,output

2）https://jsbin.com/poqezobevo/1/edit?html,css,js,output

Answer 1

这不是CSS问题，而是由JSX处理空格的方式引起的，这与普通的html略有不同。

根据JSX In Depth React指南：

JSX删除行开头和结尾的空格。它还删除空行。 删除与代码相邻的新行;在字符串文字中间出现的新行被压缩到一个空格中。

所以App呈现为

<div><span> lorem ipsum lorem ipsum </span><span> lorem ipsum lorem ipsum </span><span> lorem ipsum lorem ipsum </span></div>

在跨度之间不会中断。

要复制html片段的行为，可以添加一些显式空格：

render() {
  return (
    <div>
      <span> lorem ipsum lorem ipsum </span>{' '}
      <span> lorem ipsum lorem ipsum </span>{' '}
      <span> lorem ipsum lorem ipsum </span>
    </div>
  );
}

Answer 2

Oblosys是对的，如果你回到你的HTML并取出换行符以便你有

<div>
  <span> lorem ipsum lorem ipsum </span><span> lorem ipsum lorem ipsum </span><span> lorem ipsum lorem ipsum </span><span> lorem ipsum lorem ipsum </span>
</div>

你会看到它像在React中一样渲染 - 因为这是你的JSX编译的。

我的建议是将内联块样式应用于span元素：

span {
  display: inline-block;
}

看看它的外观：https://jsbin.com/ponidij/edit?html,css,js,output

为什么在React和纯CSS中使用相同的代码会提供不同的结果：

2 个答案: