Line Break in Product Name on Collection Pages

Store Design
1

Anyone figure out how to do this? I have something like “FANCY WIDGET (2-PACK & 4-PACK)” and I want the "(2-PACK & 4-PACK) to be on a second line to declutter the title on the collection listing page. Tried adding </ br> in the title (which works in WooCommerce) but to no avail. Was looking for some sort of escape code but couldn’t track it down in the theme files.

2
  1. Add a line break using CSS: You can target the specific element containing the title and apply CSS to force a line break. For example, you can use the white-space: pre-wrap; property to allow line breaks within the element. Here’s an example of how you can achieve this:
.collection-title-element {
  white-space: pre-wrap;
}
​
3

Thanks, the pre-line with a line-break worked a treat.

.collection-title-element {
  white-space: pre-line;
}