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

gracekrcx commented 1 year ago

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 空白字元」：

U+0009 TAB、
U+000A LF、
U+000C FF、
U+000D CR
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 commented 1 year ago

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 &middot; Second'};
}

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

gracekrcx commented 1 year ago

關鍵字：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 commented 1 year ago

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

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

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

gracekrcx commented 1 year ago

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

export default function App() {
  function createMarkup() {
    return {__html: 'First &#10; 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 commented 7 months ago

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

gracekrcx / weekly-notes