Display in IE is good but on safari it crashes

Question

Below is my code that works fine on IE 8 but it doesn't work on safari 5. The text wraps in IE and the div's layout is properly in placed on IE. But on safari everything is a mess. Guys please help me to make this work on safari 5.

I want the layout on safari to look like this on the picture enter image description here

Thanks in advance :)

Note: I just added a sample url from web to make the display better.

<html>
<body>  
<div style="overflow:auto;width:200px;clear:both;border:1px black solid;padding:4px;">
        <div class="clsContainer div1" style="border:1px solid black;margin-right:3px;float:left;">
            <img src="http://www.scicomcommerce.com/media/catalog/product/cache/1/image/5e06319eda06f020e43594a9c230972d/m/y/my-computer.jpg" 
        alt="" style="height:50px;width:50px;"/>        
        </div>
        <div class="clsContainer div2" style="float:left;">
            <div id="first" style="border:1px solid black;margin-bottom:3px;word-wrap:break-word;padding:2px;"> 
                The quick brown fox jumps over the lazy dog.
        </div>
            <div id="second" style="border:1px solid black;margin-top:8px;word-wrap:break-word;padding:2px;"> 
                ThisIsAVeryLongggggWordThatDoesNotWrapPleaseHelpMeSolveThisWordWrapIssueInSafari
        </div>
        </div>
</div>
</body>   
</html>

Why, oh why are you using only inline styles? Here: http://jsfiddle.net/Kyle_Sevenoaks/6vxkU/ — Kyle, Mar 07 '11 at 07:37
@Kyle: actually the real code is in a separate css file... I just use inline style for this sample layout as you can see all of it are dummy. I assume you might be suggesting of a hack for safari instead. :) — Carls Jr., Mar 07 '11 at 07:51
Aha, well in that case I'd suggest telling us about what the real code is like :D As it stands, Safari (afaik) doesn't support `break-word` so either you'll have to find a JS solution or not use really long words :D — Kyle, Mar 07 '11 at 07:53
:) Thanks for your help. I have tested your solution it works. 1 vote for you :) — Carls Jr., Mar 07 '11 at 08:11

score 3 · Answer 1 · edited May 23 '17 at 12:19

3

The reason this doesn't work in safari is because word-wrap : break-word is not widely supported yet.

Read this post for more inspiration: word wrap in css / js

edited May 23 '17 at 12:19

Community

1
1

answered Mar 07 '11 at 07:43

Martin Jespersen

25,743
8
56
68

Kyle · Accepted Answer · 2011-03-07T08:50:46.663

You need to add an explicit width to your #first and #second divs:

#first
{
    width: 138px;
    border:1px solid black;
    margin-bottom:3px;
    word-wrap:break-word;
    padding:2px;
}

#second
{
    border:1px solid black;
    margin-top:8px;
    width: 138px;
    word-wrap:break-word;
    padding:2px;
}

Example for you here. Tested in Safari 5.0.3 for Windows.

But Safari as yet doesn't support break-word so you'll have to go with using actual words for now :)

Display in IE is good but on safari it crashes

2 Answers2