Discover how to resolve the issue of long product names overflowing and not properly displaying within your wishlist grid view on your website. This documentation provides a solution to wrap product names into multiple lines, ensuring better readability and a cleaner layout.

How to Wrap Product Names into Multiple Lines? #

In certain cases, especially when using a grid view layout for displaying products in a wishlist, long product names may overflow beyond the container, leading to a cluttered and unappealing appearance. To address this issue and ensure that all product names are displayed properly within the designated space, we utilize CSS to wrap the product names into multiple lines.

CSS Code for Wrapping Product Names: #

.wlfmc-wishlist-table.view-mode-grid .product-name strong {
white-space: wrap !important;
}

• .wlfmc-wishlist-table.view-mode-grid: This selector targets the wishlist table specifically in grid view mode.
• .product-name strong: This targets the product names within the wishlist table that are wrapped in <strong> tags.
• white-space: wrap !important;: This CSS property instructs the browser to wrap the text within the specified element when it reaches the end of the container, ensuring that long product names are displayed on multiple lines.

You’ve successfully implemented a solution to wrap product names into multiple lines within your wishlist grid view. Enjoy the improved readability and aesthetics of your website’s product listings. If you encounter any further challenges or have additional questions, feel free to contact our support team for assistance.