How can CSS be utilized to handle line breaks in navigation menus instead of relying on PHP functions like wordwrap?

When creating navigation menus, long text items can cause the menu to break and wrap onto multiple lines, making the layout look messy. Instead of relying on PHP functions like wordwrap to handle line breaks, CSS can be utilized to control the text wrapping within the navigation menu items. By using CSS properties like white-space and text-overflow, you can ensure that long text items in the navigation menu are displayed on a single line and any overflow is handled gracefully.

.nav-menu {
  white-space: nowrap; /* Prevent text from wrapping onto multiple lines */
  overflow: hidden; /* Hide any text that overflows the container */
  text-overflow: ellipsis; /* Display an ellipsis (...) to indicate truncated text */
}