如何使白色 space 在 React Js 中被算作字符？

Question

我有一个包含白色 space 字符串的数组，如下所示：


let myArr=["Hello       ", "Bonjour      ", "Buenos dias      "]

当我检查每个字符串的长度时，字符计数也包括白色 space，但是当我在代码中使用这些字符串时，它们没有白色 space ，对于 ex.when 我正在通过数组进行映射以显示这样的字符串

myArr.map((h) => h)

在 console.log 字符串长度中包括白色 space，但是当我试图在代码中显示它们时，它们显示时没有白色 space，所以不是 **你好 // 应该有很多 space ** 它显示为 Hello 而没有 space.

如何使白色space与字符的长度和宽度相同？我需要显示每个字符串的长度与数组中的长度相同（之后具有相同的 space）。

Answer 1

我使用下面的代码可以在 html 中显示 space。

class TestArray extends React.Component {
  render() {
    let myArr=["Hello    1", "Bonjour  2", "Buenos dias      3"];
    return (<div>{myArr.map(h =><h1><pre>{h.length}{`${h}How are you?`}</pre></h1>)}
    </div>)
  }
}
  
ReactDOM.render(
  <TestArray />,
  document.getElementById('root')
);

Answer 2

如果您尝试在 html 内渲染它。尝试使用 pre 标签或 css 属性白色-space：预包装；

return (
    <div>
      <pre>{myArr.map((h) => h)}</pre>
    </div>
  );

如何使白色 space 在 React Js 中被算作字符？

How to make white space to be counted as character in React Js?

javascript

css

whitespace

reactjs