jQuaryでhtmlに追加した文字列が改行されない＆文字化けする

Question

<div id = "test"></div>

var url = "https://pbs.twimg.com/media/DU2-ULTV4AAVZmB.jpg:large";
var text = "<div class = 'content'><img src = '"+url+"' width = '100px' height = '100px'><div class = 'text'>ああああああああああああああああああああああああああああああああああああ</div></div>";
document.getElementById("test").innerHTML += text;


$(".content").css({
  "display": "flex",
  "width": "400px",
  "background-color": "rgb(241, 240, 240)",
});
$(".text").css({
  "width": "100px"
});

jQuaryで、htmlに要素と文字列を追加するプログラムを書いたのですが、下の画像の用に「あああああああ...というテキストが<div class = "content">の範囲を飛び越える（改行されない）、さらに文字化けしてしまう。

どうすれば解決できますか？ご教授お願いします。

Comments

[m.ts10806]

画像が正しく貼れていません。質問編集画面ではリアルタイムでプレビューが表示され、画像やリンクも画面遷移することなく確認できるはずなので、投稿前に想定通りにできているか確認しながら編集していってください。

[x_x]

HTMLはUTF-8で書かれているのでしょうか？

Answer 1

<script src="main.js" type="text/javascript"></script>

を

<script src="main.js" type="text/javascript" charset="utf-8"></script>

に変更したら、解決しました。

回答ありがとうございました。

Answer 2

画像が読み込めないのでなんとも

文字化けについては、HTMLファイルとJSファイルの文字コードを揃えましょう。どちらもUTF-8で保存されていますか？

文字がはみ出すのは、CSSのoverflowプロパティで調節してみてください。非表示：hidden、スクロールscroll、自動(多分これが理想？)autoなどでできます。
基本は文字サイズでしょうね