Webのテキストのレスポンシブ対応で、
PC表示で改行されないときはセンター寄せ、
SP表示で改行されてしまうときは、改行されたテキストのみ左寄せにしたいときがあります。（センター寄せだと気持ち悪い表示になる。）
そんなときはtext-aliginとdisplay inline-blockを使うと簡単に実装できることを知ったので、備忘録として書いています。
例となる画面はそのうち更新します。
レスポンシブはPC用とSP用でCSSを書き分けるのではなく、共通のソースで対応するというのが基本的な考え方みたいです。
index.js
importReactfrom'react';importstylesfrom'./styles.css';constApp=()=>{return(<divclassName={styles.accessory_container}><divclassName={styles.accessory_text}>ながいてきすとーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー</div>
</div>
);};exportdefaultApp;styles.css
.container{text-align:center;}.text{display:inline-block;text-align:left;}