Can I tell CSS to word-break only on '/' or '\'?

Question

I have a long chunk of text which is a file path within a td that causes the whole thing to be 600+pixels wide, when I want to be fit within 200 px.

I can enable word-break:break-all and have it display the whole thing breaking between characters but then it cuts the folder names in half.

So, ideally I'd like to break the lines only upon '/' or '\' characters. Is that possible?

Thank you!

Answer 1

No, you can’t; there is no CSS construct for such purposes at present.

What you can do to suggest allowed line break points is to use a <wbr> tag or a zero-width space after each “/” or “\”. You could do this dynamically with JavaScript, traversing the relevant text nodes.

Answer 2

I don't think you can do this with CSS alone. But here is a way to do it using JQuery:

function (yourObject) {
    yourObject.html(yourObject.html()
                              .replace(///g, '<br>')
                              .replace(/\/g, '<br>'));
}

This is assuming that your object doesn't contain html within it. If it does, it would replace the slashes, so you would need to check for a > following the slash.

Answer 3

A better solution might be to wrap the long text in a container element that allows scrolling, like StackOverflow does with code blocks:

.longtext {
    width: 100%;
    display: block;
    word-break: none;
    overflow: auto;
    background: #eee;
}

http://jsfiddle.net/mblase75/NCNSa/