css line break on any character to wrap inside box-CodePudding

-Hello, how can I make it so the text doesn't wrap like the top box and wraps like the bottom box inside of a div element, where it will wrap on any character but fills up the first line before moving to the second line?

CodePudding user response：

Use word-break: break-all;

.container {
  word-break: break-all;
  width: 300px;
  padding: 5px;
  border: 1px solid green;
}

<div >
  Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  次の単語グレートブリテンおよび北アイルランド連合王国で本当に大きな言葉
</div>