HTMLの親要素から、子要素が飛び出さないようにしたいです。どなたか教えて頂けると大変嬉しいです????

Question

前提・実現したいこと

親要素は、Bootstrapを使い、レスポンシブになっています。

その中で、親要素が700pxで、子要素にwidth：750pxなどが入った場合でも、
自動的に親要素から飛び出さないようにしたいです。

子要素は、各ユーザーがエディターを使用して投稿するので、
こちらで操作ができません????

試したこと

以下の様な場合で、子要素を変更できない場合、親要素でなんとか親要素内におさめせさせたいのですが、
何かよいアイデアは頂けないでしょうか？

<div style="max-width: 100px !important ; height: 100px">
　<div style="width: 500px">
		ああああああああああああああああああああああああああああああ
　</div>
</div>

既にユーザーさんの方々よりご指摘があり、早急に直したいのですが・・・
どうにもこうにもならず・・・
教えて頂けますと大変嬉しいです。。

どうぞよろしくお願いいたします。

Comments

[hatena19]

ユーザーの入力でHTMLコード( <div style="width: 500px"> というような)を許可しているということですか。

[akikko]

コメントありがとうございます！
summer noteという、テキスト入力エディタを使用しています。
恐らく、ユーザーさんが多サイトでコピーして、エディタに張り付けるとhtmlとcssまで張り付けられてしまいます。そこを制限するすべを見つけられておりません。
また、既に既存ページがそのコピペされたhtmlで作成されてしまっていますので、これからシステム上はじくのが難しい状況です????

Answer 1

Summer noteで編集されたhtmlを表示する箇所の親要素のclass名を仮に.parentとして、

.parent * {
    max-width: 100% !important;
}

としてみてはいかがでしょうか。

Comments

[akikko]

ありがとうございます！！完璧にできました！！！
凄いです。。。嬉しいです。嬉しすぎます。
本当にありがとうございます！