Q&A
GPT-4 の回答に加え、max-width: 100% などが必要になりそうです。
理屈を述べると、フレックスボックス直下のテキスト（匿名インラインボックス）はブロック化してフレックスアイテムになるけれど、匿名ボックスにスタイルをつけることはできないから、spanでインラインボックスを作ることが必要、ということです。
実現したいこと
flexが設定されたdiv内で、文字の折り返しをしたいです。
前提
以下のような簡単なコードで、boxというクラス名のdivの中のテキストをセンターにそろえ、かつ長い場合は折り返したいと考えています。
発生している問題・エラーメッセージ
flexが適応された状態だと、overflow-wrap: break-word;が効かず、はみ出して表示されます。どなたか、flexにしながら、かつ折り返せるような方法を教えていただきたいです。
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <link rel="stylesheet" href="style.css"> 7 <title>Document</title> 8</head> 9<body> 10 <div class="box">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div> 11</body> 12</html>
css
1.box { 2 max-width: 300px; 3 width: 300px; 4 height: 100px; 5 background-color: antiquewhite; 6 display: flex; 7 justify-content: center; 8 align-items: center; 9 overflow-wrap: break-word; 10}/*# sourceMappingURL=style.css.map */
試したこと
flexを解除したらちゃんと折り返しました。が、何でそうなったのかが分かりません。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答3件
0
ベストアンサー
文字を折り返すのが主目的であればword-breakで対応できます
ただし折り返したデータの左右センタリングは想定がわからないのでなんともいえません
css
1<style> 2.box { 3 width: 300px; 4 height: 100px; 5 background-color: antiquewhite; 6 display: flex; 7 justify-content: center; 8 align-items: center; 9 word-break:break-all; 10} 11.center{ 12 text-align:center; 13} 14</style> 15 16<div class="box">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div> 17<hr> 18<div class="box center">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div> 19<hr> 20<div class="box">ccc</div> 21
投稿2023/06/23 06:07
編集2023/06/23 06:09
総合スコア117613
0
GPT-4さんの回答の中のテキストをspanで囲むか、逆にboxを囲むタグを追加してそこにflexを設定するか、flexを設定するタグと、overflow-wrap: break-word; を設定するタグを分ける必要があります。
flexは、フレックスコンテとフレックスアイテムという要素が必要なので、中身のテキストがタグで囲んでなくても別の要素として扱うのだと思います。
あと、overflow-wrap: break-word; を有効にするにはその要素に幅を設定する必要もあります
推測するに、ご希望のことかは下記ではないかと。
html
1<div class="box"> 2 <span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span> 3</div>
css
1.box { 2 display: flex; 3 justify-content: center; 4 align-items: center; 5 background-color: antiquewhite; 6 max-width: 300px; 7 width: 100%; /* ここは300pxだとmax-widthの意味がない */ 8 height: 100px; 9 margin: auto; /* もし水平方向で中央配置したい場合はこれも追加 */ 10} 11 12.box span { 13 width: 100%; /* 親要素の幅に合わせる */ 14 overflow-wrap: break-word; 15} 16
投稿2023/06/23 06:14
総合スコア34343
0
この回答はGPT-4による自動生成回答です
以下のように、.box内に<span>タグを追加し、.boxのスタイルを少し変更することで、flexを使用しながらテキストを折り返すことができます。
html
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <link rel="stylesheet" href="style.css"> 7 <title>Document</title> 8</head> 9<body> 10 <div class="box"><span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span></div> 11</body> 12</html>
css
1.box { 2 max-width: 300px; 3 width: 300px; 4 height: 100px; 5 background-color: antiquewhite; 6 display: flex; 7 justify-content: center; 8 align-items: center; 9} 10 11.box span { 12 overflow-wrap: break-word; 13}
この方法では、<span>タグがテキストを折り返す役割を担い、.boxはflexboxの機能を維持しています。
投稿2023/06/23 05:24
Powered by GPT-4
あー、これは yambejp さんのご回答が正しいなあ……
フレックスボックスの最小サイズは、word-break:break-all や overflow-wrap: anywhere の時は参照されないんだな。そりゃそうだ。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2023/06/24 01:46