CSS to break a line only on a certain character?

Question

Quick scenario explanation:

Working on a client\'s eCommerce site that hooks into eBay, Amazon, and others, meaning that they have to adhere to certain naming conv

Answer 1

Demo

The \A escape sequence in the pseudo-element generated content.

CSS

.break:before {
    content:"\A";
    white-space:pre;
}

HTML

Menswear Product Item Red 
    &Black
    &Green
    &Blue
    &Yellow

Read more here

Using the content

Demo 2

html

Menswear Product Item Red

css

.break:after {
    content:"\A &Black \A &Green \A &Blue \A &Yellow ";
    white-space: pre;
}

Okies, this is what required without changing the HTML and using only css

Demo Final

.product-name a:before {
    content:"Nike Air Max 1 Premium black \A Black \A Green \A Blue \A Yellow ";
    white-space: pre;
    font-size:18px;
}
.product-name a {
    text-indent:-9999px;
    font-size:0;
    text-decoration: none;
}