Word wrap on non-alphabetical character

css, word-wrap

Solution

Yes possible if you wrap each word in a `span` element as shown in the below example:

HTML

<div><span>this,</span><span>is,</span><span>a,</span><span>bad,</span>
<span>punctuation,</span><span>example.</span>
</div>

CSS

div {
    width: 30%;
    border: 1px solid red;
    overflow: hidden;
}
div span {
    float: left;
}

Working Fiddle

otherwise, you need to look in to javascript.

JS (example):

var div = document.getElementById('main');
div.innerHTML = "<span>" + div.innerHTML.split(",").join(",</span><span>") + "</span>";

Working Fiddle

Problem

I want to break my strings like this, using css: Input: ``` this,is,a,bad,punctuaction,example. ``` Output: ``` this,is,a,bad, punctuation, example. ``` Possible?

Original source