emoji-1.html 1.0 KB

12345678910111213141516171819202122232425262728293031323334353637
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset=utf-8>
  5. <style>
  6. .test {
  7. width: 6em;
  8. border: 1px solid silver;
  9. margin: 1em;
  10. padding: 2px;
  11. }
  12. .wrapped {
  13. word-wrap: break-word;
  14. }
  15. </style>
  16. </head>
  17. <body>
  18. The emoji should wrap within the box in both cases:
  19. <div class=test>
  20. abcde fghij klmno pqrst uvw xyz
  21. &#x1f600;&#x1f601;&#x1f602;&#x1f603; &#x1f604;&#x1f605;&#x1f606;&#x1f607;
  22. &#x1f608;&#x1f609;&#x1f60a;&#x1f60b; &#x1f60c;&#x1f60d;&#x1f60e;&#x1f60f;
  23. abcdefghijklmnopqrstuvwxyz
  24. &#x1f600;&#x1f601;&#x1f602;&#x1f603;&#x1f604;&#x1f605;&#x1f606;&#x1f607;<!--
  25. -->&#x1f608;&#x1f609;&#x1f60a;&#x1f60b;&#x1f60c;&#x1f60d;&#x1f60e;&#x1f60f;
  26. </div>
  27. <div class="test wrapped">
  28. abcde fghij klmno pqrst uvw xyz
  29. &#x1f600;&#x1f601;&#x1f602;&#x1f603; &#x1f604;&#x1f605;&#x1f606;&#x1f607;
  30. &#x1f608;&#x1f609;&#x1f60a;&#x1f60b; &#x1f60c;&#x1f60d;&#x1f60e;&#x1f60f;
  31. abcdefghijklmnopqrstuvwxyz
  32. &#x1f600;&#x1f601;&#x1f602;&#x1f603;&#x1f604;&#x1f605;&#x1f606;&#x1f607;<!--
  33. -->&#x1f608;&#x1f609;&#x1f60a;&#x1f60b;&#x1f60c;&#x1f60d;&#x1f60e;&#x1f60f;
  34. </div>
  35. </body>
  36. </html>