0

Can I break words only at 50% using css? Is it possible?

Instead of longwor d

doesn't long word look better?

What's the alternative?

Update: So maybe we can auto <wbr> with js on the really long words.

Debajyoti Das
  • 2,038
  • 4
  • 34
  • 66

2 Answers2

4

In CSS hyphens: auto allows for automatic language-aware sensible hyphenation. Language is derived from the lang property.

Compatibility varies with language and browser (not implemented at all in Chrome, sadly).

You may also find use for &shy; which is a manual hyphenation clue. It is called a soft hyphen and is not visibly rendered, but merely suggests to the browser where a word may be broken.

Css tricks has a good writeup on the subject

Edit

As per your request in comments, I've made slight alterations to Resig's snippet, so that the pattern targets the full word and inserts the <wbr> in the calculated middle, rather than always after the treshold length.

The only modification to the actual pattern is to continue the search, and not stop after the threshold. I've also done away with the grouping brackets, as we'll only be using the full word:

RegExp("\\w{" + num + "}\\w+", "g")

We then find the center of the word (c = Math.floor(all.length/2)) and insert a browser hint at that point. I added a parameter to indicate whether wbr or shy should be used. The latter renders as a hyphen when hyphenation is required, and the former does not.

all.substring(0,c) + (!!shy?'&shy;':'<wbr>') + all.substring(c)

Note that for word lengths greater than num*2, the individual parts will also exceed the treshold. To get around this, I've simply added recursion:

function wbr(str, num, shy) {  
  return str.replace(RegExp("\\w{" + num + "}\\w+", "g"), function(all){
    var c = Math.floor(all.length/2);
    return wbr(all.substring(0,c) + (!!shy?'&shy;':'<wbr>') + all.substring(c),num,shy);
  });
}

Demo

David Hedlund
  • 128,221
  • 31
  • 203
  • 222
  • So maybe we can auto with js on the really long words. – Debajyoti Das Sep 25 '15 at 08:43
  • Sounds like a reasonable workaround. `­` appears to be compatible across all major browser; don't know about ``. [There's still activity on the chromium ticket](https://code.google.com/p/chromium/issues/detail?id=47083) so that may be cause for expecting it to be implemented, even though the ticket itself is 5 years old. – David Hedlund Sep 25 '15 at 08:47
  • Found something useful http://ejohn.org/blog/injecting-word-breaks-with-javascript/ – Debajyoti Das Sep 25 '15 at 09:00
  • Hyphenator, frmo Jacques' answer, is the library mentioned in the bottom of the post you've linked. If you're going for the very simple solution that John provides, you'll still be breaking at inappropriate places. From his own example: `writing`. I can't really see that you've won anything over `break-all`. – David Hedlund Sep 25 '15 at 09:09
  • Agree, hence may be I will try to find the words longer than 7 letters and break them in the middle with &shy or wbr. Do you have a script that does that... I am not exp. with js. – Debajyoti Das Sep 25 '15 at 09:13
  • So cool... Thanks :) In fact the adv. of `` is it adds the hyphen as well – Debajyoti Das Sep 25 '15 at 10:50
1

I would suggest using the Hyphenator library, as the hyphens: auto CSS property is not supported in the Chrome and Android Browser.

To use this library follow these simple steps:

  • Download the recent version of Hyphenator.js

  • Add hyphenate classes to the elements, set lang and add the Hyphenator.js <script>.

Jacques Marais
  • 2,666
  • 14
  • 33