CSS, чтобы разбить строку только на определенный символ? ⇐ CSS

[Гость]

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 convention for their products...

...which breaks their own website's look and feel. So some of their products are named thus: "Menswear Product Item Red&Black&Green&Blue&Yellow..."

(don't ask why, I don't understand why either)

This is causing me headaches with styling their products list in Grid.

So I want to know, can I create a simple CSS rule to break this string ONLY on the ampersand character?

Using

Код: Выделить всё

word-break: break-all;

obviously works, but it also breaks words we really don't want it to. I just want to break up the horrible colour string they insist they need.

HTML:

Код: Выделить всё

      [url=http://www.xxxx.com/nike-air-max-1-premium-black-blue-pink-green-trainers-319986-light-blue.html]Nike Air Max 1 Premium black&blue&pink&green trainers 319986- Light Blue[/url]  

CSS

Код: Выделить всё

.product-name a {     float: left;     font-family: 'Lato', Helvetica, sans-serif;     font-size: 13px;     line-height: 15px;     min-height: 55px;     text-align: right;     width: 90%;     color: #999;     text-transform: uppercase;     border-right: 10px solid #BEDB39;     padding-right: 4px;     word-break: break-all; } 

Источник: https://stackoverflow.com/questions/244 ... -character