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

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

Read more here

Using the content

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

Answer 2

Unfortunately, there is currently no way in CSS to tune line breaking rules by specifying, for example, that a line break is permitted after a certain character wherever it appears in the text. Such settings would well be within the scope of CSS, but there is no definition or public draft that would address such issues.

Line breaking opportunities can be indicated in different ways, but they all currently require a modification of the text or the markup. The basic methods are the control character ZERO WIDTH SPACE (U+200B), which is a standard Unicode character, and the <wbr> tag, which is a nonstandard but widely supported HTML tag. They both indicate a line breaking opportunity. It is a bit difficult to choose between them, since the line breaking issue on HTML pages is tricky. In practice, U+200B works well if we can ignore IE 6, as we mostly can these days.

Preferably, U+200B characters (or <wbr> tags) should be inserted server-side, but they can be added with client-side code. As you are saying that the page uses jQuery, the following should handle the issue, when inserted into the initialization code to be executed upon page load:

$('.product-name a').html(function(index, html){
  return html.replace(/&/g, '&\u200B');
});

Here I am naively assuming that the elements involved are a elements nested inside an element in class product-name, as in the example. Tune the selector .product-name a as needed if the situation is more complex. This code simply inserts U+200B after each occurrence of an ampersand “&” in the content. I’m assuming that breaking after an ampersand when needed is the desired behavior; should you wish to break before it, just change '&\u200B' to '\u200B&'.