Reactで改行を含むH1タグを作成する方法


import React from 'react';
function App() {
  return (
    <h1>
      タイトルの一行目\nタイトルの二行目
    </h1>
  );
}
export default App;
import React from 'react';
function App() {
  return (
    <h1>
      タイトルの一行目<br />
      タイトルの二行目
    </h1>
  );
}
export default App;
  1. CSSを使用して改行を追加する方法: CSSを使用して改行を追加することも可能です。以下の例では、white-space: pre-line;スタイルを適用し、改行文字を保持します。
import React from 'react';
import './styles.css';
function App() {
  return (
    <h1 className="multiline-title">
      タイトルの一行目
      タイトルの二行目
    </h1>
  );
}
export default App;

styles.cssファイル:

.multiline-title {
  white-space: pre-line;
}

これらはReactで改行を含むH1タグを作成するためのいくつかの方法です。必要に応じて、適切な方法を選択して使用してください。