HTML の pre を使って長い文字列を右端で折り返す

4224696333392304878706725602341482782579852840250681098010280137314308584370130707224123599639141511088446087538909603607640194711643596029271983312598737326253555802606991585915229492453904998722256795316982874482472992263901833716778060607011615497886719879858311468870876264597369086722884023654422295243347964480139515349562972087652656069529806499841977448720155612802665404554171717881930324025204312082516817125

HTMLのpreでスクロールバーを出さずこのようにしたい場合、css はこんな感じ。

pre {
  width: 400px;
  border: 2px solid red;
  padding: 10px;
  white-space: normal;
  overflow-wrap: break-word;
}

white-space: normal;とoverflow-wrap: break-word;が必要。white-spaceはpre-wrapでも折り返すが、スペースや改行の扱いがちがう。