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

<h2 class="product-name">      <a href="http://www.xxxx.com/nike-air-max-1-premium-black-blue-pink-green-trainers-319986-light-blue.html" 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; } 

Answer 1

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&'.

Answer 2

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