<!DOCTYPE html> <html> <head> <meta charset=utf-8> <style> .test { width: 6em; border: 1px solid silver; margin: 1em; padding: 2px; } .wrapped { word-wrap: break-word; } </style> </head> <body> The emoji should wrap within the box in both cases: <div class="test"> abcde fghij klmno pqrst uvw xyz 😀😁😂😃 😄😅😆😇 😈😉😊😋 😌😍😎😏 abcdefghijklmnopqrstuvwxyz <span class="wrapped">😀😁😂😃😄😅😆😇<!-- -->😈😉😊😋😌😍😎😏</span> </div> <div class="test wrapped"> abcde fghij klmno pqrst uvw xyz 😀😁😂😃 😄😅😆😇 😈😉😊😋 😌😍😎😏 abcdefghijklmnopqrstuvwxyz 😀😁😂😃😄😅😆😇<!-- -->😈😉😊😋😌😍😎😏 </div> </body> </html>