css line break on any character to wrap inside box

January 25, 2022

-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 the the second line.

>Solution :

Use word-break: break-all;

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

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