text-alignとdisplay inline-blockでレスポンシブをいい感じにする

Webのテキストのレスポンシブ対応で、
PC表示で改行されないときはセンター寄せ、
SP表示で改行されてしまうときは、改行されたテキストのみ左寄せにしたいときがあります。（センター寄せだと気持ち悪い表示になる。）

そんなときはtext-aliginとdisplay inline-blockを使うと簡単に実装できることを知ったので、備忘録として書いています。

例となる画面はそのうち更新します。

レスポンシブはPC用とSP用でCSSを書き分けるのではなく、共通のソースで対応するというのが基本的な考え方みたいです。

index.js

import React from 'react';
import styles from './styles.css';

const App = () => {
  return (
    <div className={styles.accessory_container}>
      <div className={styles.accessory_text}>
        ながいてきすとーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
      </div>
    </div>
  );
};

export default App;

styles.css

.container {
  text-align: center;
}
.text{
  display: inline-block;
  text-align: left;
}