TIL über die Donaudampfschifffahrtsgesellschaftskapitänskajütentürschwelle

How to break compound words (and not the layout)

Codepens:

DDGS, hyphens, overflow-wrap
DDGS, multi-column
DDGS, flexbox, 3 columns
DDGS, flexbox, wrap
DDGS, grid, 3 columns
DDGS, grid, auto-fill

Transcript

1. TIL über die
   Donaudampfschifffahrtsgesellschaftskapitänskajütentürsch
   

   View Slide

2. Erste Donau-Dampfschiffahrts-Gesellschaft
   

   View Slide

3. Donaudampfschiffahrtsgesellschaft
   

   View Slide

4. Donaudampfschifffahrtsgesellschaft
   

   View Slide

5. Donaudampfschifffahrtsgesellschaftskapitän
   

   View Slide

6. Donaudampfschifffahrtsgesellschaftskapitänskajüte
   

   View Slide

7. Donaudampfschifffahrtsgesellschaftskapitänskajütentür
   

   View Slide

8. Donaudampfschifffahrtsgesellschaftskapitänskajütentürsch
   

   View Slide

9. TIL über die
   Donaudampfschifffahrtsgesellschaftskapitänskajütentürsch
   

   View Slide

10. TIL über die Donaudampfschifffahrtsgesellschaftska-
    pitänskajütentürschwelle
    

    View Slide

11. TIL über die Donaudampfschifffahrtsgesellschafts-
    kapitänskajütentürschwelle
    

    View Slide

12. TIL über die Donaudampfschifffahrtsgesellschaftska-
    pitänskajütentürschwelle
    
    * { -webkit-hyphens: auto; hyphens: auto }
    

    View Slide

13. TIL über die
    Donaudampfschifffahrtsgesellschaftskapitänskajütentürsch
    

    View Slide

14. TIL über die
    Donaudampfschifffahrtsgesellschaftskapitänskajütentürsc
    hwelle
    

    View Slide

15. TIL über die
    Donaudampfschifffahrtsgesellschaft
    hwelle
    skapitänskajütentürsc
    

    View Slide

16. TIL über die
    Donaudampfschifffahrtsgesellschaft
    skapitänskajütentürschwelle
    

    View Slide

17. TIL über die
    Donaudampfschifffahrtsgesellsc
    skapitänskajütentürschwelle
    

    View Slide

18. View Slide

19. View Slide

20. View Slide

21. View Slide

22. View Slide

23. View Slide

24. View Slide

25. View Slide

26. View Slide

27. CSS
    IS
    AWESO
    ME
    

    View Slide

28. View Slide

29. View Slide

30. View Slide

31. View Slide

32. View Slide

33. View Slide

34. View Slide

35. View Slide

36. View Slide

37. View Slide

38. View Slide

39. View Slide

40. View Slide

41. View Slide

42. View Slide

43. View Slide

44. View Slide

45. View Slide

46. View Slide

47. View Slide

48. View Slide

49. View Slide

50. View Slide

51. View Slide

52. View Slide

53. View Slide

54. View Slide

55. View Slide

56. View Slide

57. View Slide

58. View Slide

59. View Slide

60. View Slide

61. View Slide

62. View Slide

63. View Slide

64. View Slide

65. View Slide

66. View Slide

67. View Slide

68. View Slide

69. View Slide

70. Donaudampfschiff ahoi!
    

    View Slide