CODEWITHSUNDEEP
cssfirefoxmozillaword-wrap
PDoria
PDoria

Reputation: 572

Firefox - CSS word-break: break-all unstable

I have a div, where a big string, without spaces, is often displayed.

I want the text to wrap around the div as displayed below:

Firefox word break example

I'm trying to make it work like shown on the left.

On Firefox (tested with v. 33.0), most of the time the text is displayed like on the left. However, sometimes (randomly?) it is displayed like on the right.

The only thing I do is refresh the page - I'd say each 1 out of 10 times the text is displayed incorrectly. It seems to me the support for the word-break is not consistent on Firefox?

Here is my CSS code. The string is displayed inside a list:

 #my_div
 {
    letter-spacing: 1px;
    font-size: 75%;
    width: 10%;
    min-height: 400px;
    margin-left: 2%;
    margin-bottom: 0px;
    padding-left: 1%;
    padding-right: 1%;
    padding-bottom: 20px;
    padding-top: 20px;
    background-color: #44EEFF;
    color: #000000;
    float: left;
    border: 1px solid #FF0000;
    -ms-word-break:break-all;
    word-break:break-all;
    word-break:break-word;
    -webkit-hyphens:auto;
    -moz-hyphens:auto;
    hyphens:auto;
    text-align: left;
    display: block;
 }

Is there a cross-browser or Firefox-specific way to wrap big strings (without spaces) inside a div?

Update:

The source code from my CSS file and also my web page are huge and I can't paste it all here. I will try to place here the relevant code, and only replace the content.

The text in #my_div is inside an unordered list (ul).

my_div is inside a container div.

Inside this container, #my_div is ONE of three divs.

The three divs should be placed side by side (#my_div is the rightmost div), hence the float:left and fixed width on all three. The widths should be 20% (#left_div), 60% (#center_div), 10% (#my_div). I left a little space in between for margins.

Here is the complete CSS code:

 #my_div
 {
    letter-spacing: 1px;
    font-size: 75%;
    width: 10%;
    min-height: 400px;
    margin-left: 2%;
    margin-bottom: 0px;
    padding-left: 1%;
    padding-right: 1%;
    padding-bottom: 20px;
    padding-top: 20px;
    background-color: #44EEFF;
    color: #000000;
    float: left;
    border: 1px solid #FF0000;
    -ms-word-break:break-all;
    word-break:break-all;
    word-break:break-word;
    -webkit-hyphens:auto;
    -moz-hyphens:auto;
    hyphens:auto;
    text-align: left;
    display: block;
 }

#my_div ul, #my_div ul li
{
 padding: 1%;
 margin: 10px;
 -ms-word-break:break-all;
    word-break:break-all;
    word-break:break-word;
    -webkit-hyphens:auto;
    -moz-hyphens:auto;
    hyphens:auto;
}

#my_div_container
{
    letter-spacing: 1px;
    text-align: left;
    margin: 0 auto;
    background-color: #666666;
    display: block;
    padding-top: 20px;
    padding-bottom: 20px;
    width: 100%;
    -ms-word-break:break-all;
    word-break:break-all;
    word-break:break-word;
    -webkit-hyphens:auto;
    -moz-hyphens:auto;
    hyphens:auto;
    text-align: left;
    display: block;
    overflow: auto;
}

#left_div
{
    letter-spacing: 1px;
    text-align: left;
    width: 20%;  
    margin-left: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    background-color: #AAEEFF;
    float: left;
    display: block;
    /*word-break: break-all;
    word-wrap: break-word;*/
}

#center_div
{
    background-color: #AAEEFF;
    border: 1px solid #FF0000;
    color: #FFFFFF;
    font-size: 100%;
    width: 60%;
    margin-left: 2%;
    margin-bottom: 5px;
    padding-left: 1%;
    padding-right: 1%;
    min-height: 70vh;
    display: block;
    float: left;
}

#left_div_inner_div
{
    color: #000000;
    background-color: #AAEEFF;
    font-size: 100%;
    width: 100%;
    left: 20px;
    top: 90px;
    border: 1px solid #FF0000;
    padding-top: 5px;
    padding-bottom: 10px;
}

#left_div_inner_div_horizontal_div
{
    padding: 0;
    margin: 0;
    border: 0;
}

#left_div_inner_div_horizontal_div a
{
    padding-left: 25px;
    text-indent: 0px;
    /*text-indent: 20px;*/
    display: inline-block;
}

.page_background
{
    font-family: Arial;
    background-color: #000000;
    /*width: 100%;*/
    margin: 0px;
    padding: 0px;
    border: 0px;
    min-height: 100%;
}

#my_content
{
   background-color: #000000;
   width: 100%;
   display: block;
   overflow: auto;
   border: 0;
   padding: 0;
   margin: 0 auto;
   text-align: center;
}

#my_wrapper
{
   width: 100%;
   border: 0px;
   margin: 0px;
   padding: 0px;
   background-color: #000000;
}

Here is the HTML code of the page:

<!DOCTYPE html>
<html>
<body class='page_background'>

<div id='my_wrapper'>
<div id='my_content'>

<div id='my_div_container'>

<div id='left_div'>
 <div id='left_div_inner_div'>
  <div id='left_div_inner_div_horizontal_div'>
  <a href='http://stackoverflow.com'>Stack Overflow</a>
  </div>
  <div id='left_div_inner_div_horizontal_div'>
  <a href='http://www.google.com'>Google</a>
  </div>
 </div>
</div>

<div id='center_div'>
<p>Center area</p>
</div>

<div id='my_div'>
<table>
<tr><td>
<ul>
<li>
large_string_inside_my_div_is_not_working_consistently_in_firefox
</li>
</ul>
</td></tr>
</table>
</div>

</div>

</div>
</div>

</body>
</html>

I'm trying to reproduce the error using the fiddle from Guilherme.

Upvotes: 1

Views: 2729

Answers (2)

Korvo
Korvo

Reputation: 9754

This is why you used <table> to "layout", <table> should be used to tabular-data (semantic)

Note: word-break and hyphens are inherit

The bug caused because of TABLE:

<style>
#my_div {
    letter-spacing: 1px;
    font-size: 75%;
    width: 10%;
    min-height: 400px;
    margin-left: 2%;
    margin-bottom: 0px;
    padding-left: 1%;
    padding-right: 1%;
    padding-bottom: 20px;
    padding-top: 20px;
    background-color: #44EEFF;
    color: #000000;
    border: 1px solid #FF0000;

     -ms-word-break: break-all;
         word-break: break-all;
         word-break: break-word;
    -webkit-hyphens: auto;
       -moz-hyphens: auto;
            hyphens: auto;

    text-align: left;
    display: block;
}

#my_div ul, #my_div ul li {
    padding: 0;
    margin: 10px;
}
</style>

<div id="my_div">
    <table>
        <tr>
            <td>
                <ul>
                    <li>
                    large_string_inside_my_div_is_not_working_consistently_in_firefox
                    </li>
                </ul>
            </td>
        </tr>
    </table>
</div>

Online example: http://jsfiddle.net/f5shbhsx/10/

Fix issue:

<style>
#my_div {
    letter-spacing: 1px;
    font-size: 75%;
    width: 10%;
    min-height: 400px;
    margin-left: 2%;
    margin-bottom: 0px;
    padding-left: 1%;
    padding-right: 1%;
    padding-bottom: 20px;
    padding-top: 20px;
    background-color: #44EEFF;
    color: #000000;
    border: 1px solid #FF0000;

     -ms-word-break: break-all;
         word-break: break-all;
         word-break: break-word;
    -webkit-hyphens: auto;
       -moz-hyphens: auto;
            hyphens: auto;

    text-align: left;
    display: block;
}

#my_div ul, #my_div ul li {
    padding: 0;
    margin: 10px;
}
</style>

<div id='my_div'>
    <ul>
        <li>
        large_string_inside_my_div_is_not_working_consistently_in_firefox
        </li>
    </ul>
</div>

Online example: http://jsfiddle.net/f5shbhsx/11/

Semantic HTML:

Tables are semantically incorrect markup for the layout, prefer to use "semantics", see:

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/HTML5_element_list

Read about tabular data: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/HTML5_element_list#Tabular_data

More? Google: https://www.google.com.br/search?q=html+semantic+layout

Upvotes: 2

Syed Arif Iqbal
Syed Arif Iqbal

Reputation: 1427

use to your container

 -ms-word-break: break-all;  
     word-break: break-all;

Upvotes: 1

Related Questions