Question

我有一个div，通常会显示一个没有空格的大字符串。

我希望文本环绕div，如下所示：

Firefox word break example

我正试图让它像左边显示的那样工作。

在Firefox上（使用v.33.0测试），大多数时候文本显示在左侧。 然而，有时（随机？）它会像右侧一样显示。

我唯一要做的就是刷新页面 - 我会说每10次文本显示不正确。在我看来，支持word-break在Firefox上并不一致？

这是我的CSS代码。该字符串显示在列表中：

 #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;
 }

是否有跨浏览器或Firefox特定的方式在div中包装大字符串（没有空格）？

更新：

我的CSS文件和我的网页上的源代码都非常庞大，我无法将其全部粘贴在此处。我将尝试在此处放置相关代码，并仅替换内容。

#my_div中的文本位于无序列表（ul）中。

my_div位于容器div中。

在这个容器内，＃my_div是三个div中的一个。

三个div应该并排放置（#my_div是最右边的div），因此浮动：左边和固定宽度都在这三个上。宽度应为20％（＃left_div），60％（＃center_div），10％（#my_div）。我在两者之间留下了一点空间。

以下是完整的CSS代码：

 #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;
}

以下是该页面的 HTML代码：

<!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>

我正试图使用Guilherme的小提琴重现错误。

Answer 1

使用您的容器

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

Answer 2

这就是您使用<table>来“布局”的原因，<table>应该用于tabular-data（语义）

注意：word-break和hyphens为inherit

由于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>

在线示例：http://jsfiddle.net/f5shbhsx/10/

修复问题：

<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>

在线示例：http://jsfiddle.net/f5shbhsx/11/

语义HTML：

表格在布局上是语义上不正确的标记，更喜欢使用“语义”，请参阅：

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

了解表格数据： https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/HTML5_element_list#Tabular_data

更多？ Google：https://www.google.com.br/search?q=html+semantic+layout

Firefox - CSS word-break：break-all不稳定

2 个答案:

由于TABLE引起的错误：

修复问题：

语义HTML：