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

【问题标题】：Firefox - CSS word-break: break-all unstableFirefox - CSS word-break：break-all 不稳定
【发布时间】：2014-10-25 04:53:00
【问题描述】：

我有一个 div，其中经常显示一个没有空格的大字符串。

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

我正在努力让它像左边所示的那样工作。

在 Firefox（使用 v. 33.0 测试）上，大部分时间文本显示在左侧。 但是，有时（随机？）它会显示在右侧。

我唯一要做的就是刷新页面 - 我会说每 10 次文本显示不正确。在我看来，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），因此这三个 div 都是 float:left 和固定宽度。宽度应为 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 的小提琴重现错误。

【问题讨论】：

对我来说工作正常，请参见示例：jsfiddle.net/f5shbhsx 显示整个代码，以确保出现问题的情况
我没有提到我实际上把字符串放在了一个列表中，但是在你的小提琴中它确实一直在工作......我还将所有 div 的实际代码放在你的小提琴中，它似乎正常工作。但在我的网页上，它并非在所有情况下都 100% 有效。老实说，我不知道还有什么其他部分会弄乱这个 CSS...
显示整个代码或页面出现的问题，正如你所说，问题只出现在你的页面上，所以我们可以确定问题可能在CSS的其他地方。 注意： 您当前的 CSS 结果如下：jsfiddle.net/f5shbhsx/2
Guilherme，我设法复制了它。请检查（使用 FIREFOX！）jsfiddle.net/f5shbhsx/9

标签： css firefox mozilla word-wrap

【解决方案1】：

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

注意：word-break 和 hyphens 是 inherit

由于TABLE引起的bug：

<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

【讨论】：

我明白了。所以，基本上，我不应该再使用表格来构建布局，我应该使用另一个更合适的元素。非常感谢您的帮助和有用的链接。

【解决方案2】：

使用你的容器

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

【讨论】：

试过了。将这两行添加到作为容器的每个 div（甚至是 page_background 正文类）中，问题仍然存在