htmlでの特定の記述をするとcssが反映されない

Question

お世話になります。

htmlで　<p>html,css,php,JavaScript.....</p>などのような言語名の羅列の記述部分のみ
表示はされるのですが、一部のcssが反映されない状況です。

---

反映されるcssプロパティ

• font-size
• font-wight
• line-hight など

反映されないcssプロパティ

• width
• flex-wrap など

---

<div>
　<p>.....</p>
　<p>skills & tools<br>html/css/JavaScript•jQuery/PHP/MySQL/WordPress/Illustrator
    /XD/CLIP STUDIO　PAINT Pro</p>
</div>

---

上記のコードを別ファイルでも試したところ、該当部分のみcssが反映されていないように思います。

そのため、レスポンシブができず困っております。
反映されるようにするには、どのように対処したら良いでしょうか、ぜひご教授願います。

Comments

[Lhankor_Mhy]

ソースコードを書きましょう
https://teratail.com/help/question-tips#questionTips3-5-1

[K_3578]

現在書かれているソースコードと状況を確認できるスクショなどを追記して頂きたいです。

[m.ts10806]

レスポンシブは本質的には無関係では

[Lhankor_Mhy]

ご提示のコードを試してみましたが、問題が再現しません。
問題が再現するコードをご提示ください。

また、スクリーンショットを見る感じ、width は効いているんじゃないかな、と思いました。
orimageさんが「反映されない」と感じる原因となった具体的な現象は何ですか？

[m.ts10806]

小出しやめましょう。
コピペで再現できるコードを。
そして、具体的に説明を。

[退会済みユーザー]

m.ts10806様
小出しにしているつもりは毛頭ございません。個人情報に関わる部分なので、記載に慎重になっています。

[K_3578]

個人情報に関わるような内容をteratailに限らず赤の他人に聞くのが良くないと思いますが･･･。

[退会済みユーザー]

当然ですが、当事者の許可を得て質問しています。
そういった問題はこちらの問題ですので、お気になさらず結構です。

[m.ts10806]

再現できないと回答も難しいので、問題が再現するコードを組み直すか、然るべきところに対価を支払い依頼されたほうが良いかと。

[Lhankor_Mhy]

CSSから提示されてはいかがでしょうか。CSSに個人情報が埋めてあることはあまりないですよね。

[Lhankor_Mhy]

質問の編集拝読。
この width: 200px は反映されているようですが、関係ないのですか？
とりあえず、CSSをご提示されてはいかがでしょうか？

「こうなると思って」
「こう書いたが」
「このような結果になった」
のように、期待・コード・結果を提示すると、回答が得られやすいです。

[Lhankor_Mhy]

もしかして、文字を折り返したい、というご質問ですか？

[退会済みユーザー]

Lhankor_Mhy 様
おっしゃる通りです。お聞きしたいのはそのことでした。

すみません、こちらの表現のしかたがよくなかったです。

[Lhankor_Mhy]

問題を把握しました。

[K_3578]

ここから文字の折り返しが出てくるのシンプルに凄いと思いました

[退会済みユーザー]

はい、本当にLhankor_Mhy 様のおかげです。ありがとうございました。

[Lhankor_Mhy]

恐縮です。

[K_3578]

余計かもしれませんが･･･
多分質問文の内容だと第三者が見た時に問題点が分かりにくいかと思いますので
問題点が何だったのか質問文に追記しておいてくれるとナレッジとして活きると思います。

Answer 1

word-break: break-allでいいと思います。

word-break は CSS のプロパティで、改行しなければテキストがコンテンツボックスからあふれる場合に、ブラウザーが改行を挿入するかどうかを指定します。

word-break - CSS: カスケーディングスタイルシート | MDN

Comments

[退会済みユーザー]

Lhankor_Mhy様

ご回答の内容で解決いたしました。
お手間をとらせてしまい、失礼いたしました。
大変たすかりました、ありがとうございます。