difference between \r\n, \r, and \n

[gracekrcx]

wiki 有列表顯示 Software applications and operating system representation of a newline with one or two control characters

'white-space': 'pre-wrap' 是非常適合的換行方式
NewLines.jsx
其實真的不懂 white-space 吧

white-space

The white-space CSS property sets how white space inside an element is handled.

Whitespace characters 有哪些

Infra 動態標準將五個字元定義為「ASCII 空白字元」：

1. U+0009 TAB、
2. U+000A LF、
3. U+000C FF、
4. U+000D CR
5. U+0020 SPACE。

Example

<span>
 Example #1: <br /> newline
</span>
<span style={{ whiteSpace: 'pre-wrap' }}>
 {"Example #2: \r new line or \u000A new line"}
</span>
{/* do not forget add style { white-space: pre-wrap } */}
<Example3 text={"Example #2: \r new line or \u000A new line"} />

New line in react

文章

React JSX 字串處理
What is the difference between \r\n, \r, and \n? [duplicate]
Unix / Linux / OS X / Windows 系统下的回车换行符都分别是什么？
https://hackmd.io/@mike-liu/By32a6lyi

[gracekrcx]

HTML Letter Symbols, Letter Entities and ASCII Letter Character Code Reference

HTML ENTITY : ·link

怎麼 · 有反應但 
 沒反應？？？
所以查了 u000a not work in jsx element
(其實不是沒反應，只是 browser 處理的方式，需要加上 css 才會有反應)

function createMarkup() {
  return {__html: 'First · Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

[gracekrcx]

關鍵字：u000a not work in jsx element 找到了底下的文章

newline characters are normally interpreted by HTML as spaces
Newline character doesn't render in browser
Why does the browser renders a newline as space?
newlines character ignored by jsx table

[gracekrcx]

跳脫符號
除了常規的、可印出來的字元，特殊字元也可以被跳脫符號來表示編碼。

解釋：
跳脫符號 \
表示編碼 \n 所以 \n 內涵編碼的成分，只是看起來是反斜線n

字串中的跳脫字元（Escaping characters）

[gracekrcx]

• dangerouslySetInnerHTML 使用 HTML ENTITY
• 變數字串 使用 UNICODE

export default function App() {
  function createMarkup() {
    return {__html: 'First 
 Second'};
  }
  
  const text = 'Tommy Tommy \u000a Carl Carl'

  return (
    <div className="App">
      <div style={{
      'white-space': 'pre-wrap'
      }} dangerouslySetInnerHTML={createMarkup()} />
      <h2 style={{
      'white-space': 'pre-wrap'
      }}>{text}</h2>
    </div>
  );
}

[gracekrcx]

使用的「語法」跟你的「平台」有關
ASCII 表格
從ASCII到Unicode
CRLF和LF的差異
CRLF
回车(CR)与换行(LF)， '\r'和'\n'的区别