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

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

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

11399閲覧

[HTML/CSS] flexboxから非常に長いテキストがはみ出る

search_search

総合スコア187

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1グッド

1クリップ

投稿2016/06/02 08:40

編集2016/06/02 08:43

html/cssを勉強中の者です。flexboxがレイアウトに便利そうなので使ってみました。しかし、問題があって困っています。分かち書きしていない非常に長いテキストがflexboxからはみ出してしまいます。以下にコードを示します。

css

1div { 2 border: 1px solid; 3} 4.container { 5 display: flex; 6 flex-wrap: wrap; 7 max-width: 300px; 8} 9.text { 10 flex: 1; 11}

html

1<body> 2<div class="container"> 3 <div class="text"> 4 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 5 </div> 6 <div class="text"> 7 aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa 8 </div> 9</div> 10</body>

そして、実行結果はこれです。

実行結果

また、参考として、コードシェアのページを貼ります。
http://codepen.io/search_search/pen/dXPabj

テキストが、コンテナを突き破って伸びています。

しかし、一方で分かち書きした場合は想定通りにコンテナ内に収まってくれています。これは不思議な仕様です。日本語は分かち書きしない言語ですから、困ります。

分かち書きしていない文章を、コンテナ内に綺麗に収める方法はありませんか?

overflowプロパティを変えてみましたが、スクロールバーが表示されたり、テキストが切り詰められたりして、理想の動作になりませんでした。

実行ブラウザは Google Chrome 51.0.2704.63 m です。

kei344👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

こんにちは。

こんな感じですか?

css

1div { 2 border: 1px solid; 3} 4.container { 5 display: flex; 6 flex-wrap: wrap; 7 flex-flow: column nowrap; 8 max-width: 300px; 9} 10.text { 11 flex: 1; 12 13} 14p{ 15 word-break: break-all; 16 width: 300px; 17 width:100%; 18 19}

html

1<div class="container"> 2 <div class="text"> 3 <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> 4 </div> 5 <div class="text"> 6 <p>aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa aaa</p> 7 </div> 8</div>

投稿2016/06/02 09:30

kogure

総合スコア299

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

search_search

2016/06/02 09:44

ありがとうございます。コードを実行したところ、たしかに文章を包んでいるdivブロックがコンテナからはみ出ないようになりました。 しかし、やはり文章自体ははみ出てしまいますね。これは、chiro.0519さんがおっしゃる通り、ブラウザの問題で、どうしようもないということなのでしょうか・・・。 また、やり方的に若干ハックな印象を受けるので、すこし不安です。
kei344

2016/06/02 09:53 編集

> 文章自体ははみ出てしまいます こちらの環境(Windows Chrome[51.0.2704.63 m (64-bit)]/Firefox[46.0.1])では再現しませんでした。IE11は「display: ms-flex;」にすることで表示され、文字がはみ出す問題は発生しませんでした。 【Create a new fiddle - JSFiddle】(動くサンプル) https://jsfiddle.net/3u17k0yt/ > やり方的に若干ハックな印象を受ける 私はその印象が無かったのですが、どのあたりがでしょうか?
kogure

2016/06/02 10:02

>また、やり方的に若干ハックな印象を受けるので、すこし不安です。 俺も気になります!どこがどうハックっぽく感じたんですか? chrome「バージョン 51.0.2704.79 m」にバージョンあげてみましたがしっかりおさまってる。。。。 ちゃんとPタグも実装しましたか?
search_search

2016/06/02 10:11

大変失礼しました! HTMLのほうにpタグを書き加えていませんでした。加えたところ、完全に収まってくれました。ありがとうございます! また、ハックと感じた部分についても - pタグのwidthを2重に指定している - wrapを指定したあとにnowrapを指定している 部分ですが、これらは削除しても動作に影響がなかったので、私の勘違いでした。 理想的なコードです。ありがとうございました!
kogure

2016/06/02 10:17

>- pタグのwidthを2重に指定している あーそれなくて平気ですw 試しの消し忘れです。 >- wrapを指定したあとにnowrapを指定している この子「flex-wrap: wrap;」も別にいらないです。 まるっと検証する時間がなかったので付け足しだけしていました。。勘違いさせてしまいましたね まぁその辺はうまく取捨選択していただければ幸いです。 取り合えず、求める結果になってよかったです!! 私ももー少し丁寧に書くように心がけます。
guest

0

不確かで申し訳ないのですが、
英語の単語は改行が入る事がないため、折り返しされなかったはずです。
なので、【aaaaaaaaaaaaaaaaaaaaaaaaaaa】の様に区切りがない半角英数字は一列で表示されます。

これはブラウザの問題で解決策が無かった気がします。
日本語は分かち書きをしませんが、単語の間に改行が入っても伝わる為
日本語で試してみて下さい。 ボックスからはみ出る事がないはずです。

投稿2016/06/02 09:18

chiro.0519

総合スコア118

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

search_search

2016/06/02 09:29

ありがとうございます。日本語にしたところ、たしかにボックス内に収まるようになりました。 しかし、たとえばふざけたユーザーの投稿メッセージとして、aaaaaaaaaのような英数字を分かち書きせずに表示しなければならないケースもありうるので、なんとか解決したいところです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問