sabithpocker sabithpocker - 9 days ago 6
Javascript Question

How to limit break-all to only long words?

I am trying to break very long words(some long uuid as well) in all

col
in bootstrap based template, but when I use the below style for all columns, it breaks everything(check bad breaking in example) even the places were normal wrapping at words worked perfectly(check expected breaking in example).

Is there a way I can use normal breaking wherever possible and revert to
break-all
only when it fails to do the trick? Javascript tricks are also welcome if that doesn't affect performance much.

I want normal breaking to work for space operated normal text and
break-all
to work if the text doesn't have any space and overflows. I wonder if this is even possible!



div {
white-space: -moz-pre-wrap;
/* Mozilla */
white-space: -hp-pre-wrap;
/* HP printers */
white-space: -o-pre-wrap;
/* Opera 7 */
white-space: -pre-wrap;
/* Opera 4-6 */
white-space: pre-wrap;
/* CSS 2.1 */
white-space: pre-line;
/* CSS 3 (and 2.1 as well, actually) */
word-wrap: break-word;
/* IE */
word-break: break-all;
}
.fifty {
width: 200px;
float: left;
border: 10px solid #e6e6e6;
margin: 1px;
font-size: 14px;
font-family: Verdana;
}
h6 {
clear: both;
margin:0;
}

<div class="fifty">aquickwhitefoxjumpsoverafrozendog</div>
<div class="fifty">A Quick White Fox Jumps Over A Frozen Dog</div>

<h6>Bad breaking at all places</h6>
<div class="fifty">StackOverflow is a privately held website, the flagship site of the StackExchangeNetwork, created in 2008 by Jeff-Atwood and Joel-Spolsky</div>

<h6>Expected breaking</h6>
<article class="fifty">StackOverflow is a privately held website, the flagship site of the StackExchangeNetwork, created in 2008 by Jeff-Atwood and Joel-Spolsky</article>




Answer

div {

  / These are technically the same, but use both /
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  / This is the dangerous one in WebKit, as it breaks things wherever /
  word-break: break-all;
  / Instead use this non-standard one: /
  word-break: break-word;

  / Adds a hyphen where the word breaks, if supported (No Blink) /
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;

}
.fifty {
  width: 200px;
  float: left;
  border: 10px solid #e6e6e6;
  margin: 1px;
  font-size: 14px;
  font-family: Verdana;
}
h6 {
  clear: both;
  margin:0;
}
<div class="fifty">aquickwhitefoxjumpsoverafrozendog</div>
<div class="fifty">A Quick White Fox Jumps Over A Frozen Dog</div>

<h6>Bad breaking at all places</h6>
<div class="fifty">StackOverflow is a privately held website, the flagship site of the StackExchangeNetwork, created in 2008 by Jeff-Atwood and Joel-Spolsky</div>

<h6>Expected breaking</h6>
<article class="fifty">StackOverflow is a privately held website, the flagship site of the StackExchangeNetwork, created in 2008 by Jeff-Atwood and Joel-Spolsky</article>

Comments