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

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

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

Comments

[Murtaza]

can you split the string using javascript and append it to your span, p, as per the number of characters. suppose your area fits 20 chracters and you find & at 14th character calculate the next word length if total exceeds 20 append a <br/>

[Reverend2100]

I shame-facedly don't know Javascript well enough to use it, and actually this site is already riddled with jQuery overlaps and issues... using further Javascript worries me.

[Murtaza]

you can also use jQuery, try posting your code.

[Nitesh]

could you produce your code ??

[Jacob G]

I don't think there is a CSS only way of doing it. You could wrap them in <span> and then do this. If they already are links then you could just do this with the <a> element.jsfiddle.net/ImagineStudios/MqUEA/2

[Reverend2100]

code now shown - hope that's enough...

[Harry]

@Reverend2100: Use ` to format code only for single line code mate. For blocks of code, select the code and click Ctrl + K or click the {} button in button bar for better formatting :)

[Lewis]

There is no way to do it with pure CSS.

[Abhitalks]

@Reverend2100: What are you using at server-side? Can you replace all & with ​&? If you can do that, then CSS -webkit-hyphens: manual; will help you.

[xec]

So... as all this code depends on changes in the HTML, this answer is basically saying "nope, you can't do it with css alone", except more wordy ;)

[Jacob G]

Yep, that's what we're saying.;)

[Reverend2100]

Hi Gaurav, thanks for the response... so are you suggesting that a specific CSS rule be written for each and every product description?

[Franklin Yu]

Good news: <wbr> is standardized in HTML5.