'overflow-x'で横スクロールするリストの子要素に日本語を置くと、縦書きになってしまう

#実現したいこと
以下のような、縦幅固定の横並びでアイテムが追加されていく横スクロールのリストを作ろうと思っています。

#エラー
ところが、アイテムの中身を日本語にした時のみ、以下のように縦書きになってしまいます。

html
1<div class='list'>
2  <div class='list_item'>ほげ</div>
3  <div class='list_item'>ふが</div>
4  <div class='list_item'>poyo</div>
5  <div class='list_item'>ぽよ</div>
6  <div class='list_item'>ぽよ</div>
7  <div class='list_item'>poyo</div>
8  <div class='list_item'>ぽよ</div>
9</div>

css
1.list {
2  background-color: #eee;
3  width: 300px;
4  display: flex;
5  align-items:center;
6  overflow-x: scroll;
7}
8
9.list_item {
10  border: 1px solid #444;
11  margin-right: 20px;
12  padding: 6px;
13}

overflow-xを解除しても改善しなかったので、おそらくdisplay:flexが鍵なのではと推測しています。

どなたかお知恵を貸してくださると幸いです。

行動規範の内容に同意します

回答1件

ベストアンサー

word-break: keep-all;で日本語の改行を防げます.

css
1.list_item {
2  border: 1px solid #444;
3  margin-right: 20px;
4  padding: 6px;
5  word-break: keep-all;
6}

https://developer.mozilla.org/ja/docs/Web/CSS/word-break

投稿2018/04/10 08:26

defghi1977

総合スコア4756

MapleMomij

2018/04/10 08:27

実現できました！！！ありがとうございます！！！

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

'overflow-x'で横スクロールするリストの子要素に日本語を置くと、縦書きになってしまう

関連した質問