Search code examples
cssinternet-explorerresizewindowword-wrap

word wrap does not work on when window is resized on IE

I have a simple html layout that has 3 divs. The divs are separated by a border line. The middle div has long text. I am breaking the long text by applying the style word-wrap:break-word. The issue is on window resize ( when the window is smaller in size), the text is getting overlapped with the border line. This is happening only on IE (version 11) but works well with chrome and FF.

Please advise on how to resolve the window resize text alignment issue on IE. Here's the html:

<html>
    <body>
        <div style="border-right-style: solid;border-width:1px;">
        text goes here
        </div>
         <div style="border-right-style: solid;border-width:1px;">
            <span style="word-wrap:break-word;"> XX-standard-com.longtext.nogoodexperience.howtoresolve_nofix.yyy</span>
         </div>
        <div>
        XX-standard-com.longtext.nogoodexperience.howtoresolve_nofix.yyy
        </div>
    </body>
</html>
Solution

  • The issue is that the span is a inline element. Try using a div or making it display: block.

    <html>
    <body>
        <div style="border-right-style: solid;border-width:1px;">
        text goes here
        </div>
         <div style="border-right-style: solid;border-width:1px;">
            <span style="word-wrap:break-word; display: block;"> XX-standard-com.longtext.nogoodexperience.howtoresolve_nofix.yyy</span>
         </div>
        <div>
        XX-standard-com.longtext.nogoodexperience.howtoresolve_nofix.yyy
        </div>
    </body>
</html>