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

Краткое описание сценария:

Работа с сайтом электронной коммерции клиента, который подключается к eBay, Amazon и другим, что означает, что они должны придерживаться определенного соглашения об именах для своих продуктов...

... который нарушает собственный внешний вид веб-сайта. Таким образом, некоторые из их продуктов называются так: "Продукт мужской одежды Red & Black & Green & Blue & Yellow..."

(не спрашивайте, почему, я тоже не понимаю, почему)

Это вызывает у меня головную боль, ставя их список продуктов в грид.

Итак, я хочу знать, могу ли я создать простое правило CSS, чтобы разбить эту строку ТОЛЬКО на символ амперсанда?

Использование word-break: break-all; очевидно работает, но оно также нарушает слова, которые мы действительно не хотим. Я просто хочу разбить ужасную строку цвета, которую они настаивают на необходимости.

HTML:

<h2 class="product-name"> 
    <a href="#" onclick="location.href='http://www.xxxx.com/nike-air-max-1-premium-black-blue-pink-green-trainers-319986-light-blue.html'; return false;" title="Nike Air Max 1 Premium black&amp;blue&amp;pink&amp;green trainers 319986- Light Blue">Nike Air Max 1 Premium black&amp;blue&amp;pink&amp;green trainers 319986- Light Blue</a>
</h2>

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;
}

Ответ 1

К сожалению, в настоящее время в CSS нет возможности настраивать правила нарушения строки, указывая, например, что прерывание строки разрешено после определенного символа, где бы он ни появлялся в тексте. Такие настройки будут входить в рамки CSS, но нет определения или публичного проекта, который бы рассматривал такие проблемы.

Возможности разрыва строки могут быть указаны по-разному, но все они требуют модификации текста или разметки. Основными методами являются управляющий символ ZERO WIDTH SPACE (U + 200B), который является стандартным символом Unicode и тегом <wbr>, который является нестандартным, но широко поддерживаемым тегом HTML. Оба они указывают на возможность прерывания линии. Это немного сложно выбрать между ними, так как проблема '&\u200B' на '\u200B&'.

Ответ 2

Демо

\A escape-последовательность в создаваемом псевдоэлементом содержимом.

CSS

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

HTML

<p>Menswear Product Item Red 
    <span class="break">&Black</span>
    <span class="break">&Green</span>
    <span class="break">&Blue</span>
    <span class="break">&Yellow</span>
</p>

Подробнее здесь

Используя content

Демо 2

HTML

<p class="break">Menswear Product Item Red</p>

CSS

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

Okies, это то, что требуется без изменения HTML и использования только css

Демо-версия

.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;
}