0

The word-break:break-word is not supported on edge, ie and firefox. I need the css to break the word if space is present the break at that space but if space is not present break the word directly(check fiddle in chrome or safari). As MS edge ,IE and Firefox does not support break-word, I had to use break-all but it also breaks the word in middle even if spaces are present in the sentence.

Is there any css that I can use here

Here is the fiddle the text try it on different browsers and you will get the issue I am getting

https://jsfiddle.net/emx9bL3y/7/

@supports (-ms-ime-align:auto) {
.white-space-pre-wrap{
word-wrap:break-word!important;
word-break:break-all!important;
display:inline-block; 
}
 }

Thanks

the solution at Breaking words using CSS states that the label should have a fixed width but in this case the width of the label will vary it can be 200px to the width of the screen. So if the screen size is bigger the width of the label will be bigger or the other way.

Community
  • 1
  • 1
Anurag.Desai
  • 103
  • 1
  • 15
  • Possible duplicate of [Breaking words using CSS](http://stackoverflow.com/questions/7370704/breaking-words-using-css) – TylerH Mar 16 '17 at 14:03
  • TylerH I cannot add width to my solution as the width of my text label will vary. Fixed width cannot be given in this case – Anurag.Desai Mar 16 '17 at 14:59

1 Answers1

0

Please check this code, it is working.

.word-breck {
    width: 100%;
    border: solid 1px #ccc;
    word-wrap: break-word;
}
<div class="word-breck">    <p>Itisalongestablishedfactthatareaderwillbedistractedbythereadablecontentofapagewhenlookingatitslayout.ThepointofusingLoremIpsumisthatithasamore-or-lessnormal.</p>
</div>
Sawan mishra
  • 691
  • 1
  • 8
  • 13
  • It works only on chrome and safari not on other browsers. Need a fix for edge,ie and firefox as they dont support the break-word property – Anurag.Desai Mar 16 '17 at 13:57