css - Firefox - CSS 断字 : break-all unstable

标签 css firefox mozilla word-wrap

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

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

Firefox word break example

我正在努力让它像左图那样工作。

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

我唯一要做的就是刷新页面 - 我会说每 10 次中就有 1 次文本显示不正确。在我看来，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 和 fixed width。宽度应为 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 的 fiddle 重现错误。

最佳答案

这就是你使用 <table> 的原因到“布局”，<table>应该用于tabular-data (语义)

Note: word-break and hyphens are 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

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

关于css - Firefox - CSS 断字 : break-all unstable，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26475640/

上一篇：html - Chrome float 问题

下一篇：javascript - HTML - 发票 : How to add values to text field and calculate total

相关文章：

Jquery SlideToggle div 向上滑动(动画)

javascript - 如何为 php 语法指定样式

python - 为什么 split is_text_present() 会导致 Firefox 间歇性出现 StaleElementReferenceException(但 Chrome 或 phantomjs 不会)？

css - !important css 没有覆盖 firefox 中的属性

javascript - 查找当前位置的纬度和经度

html - 符号在 mozilla 中显示不正确

javascript - Firefox 中的 SVG 对象未触发滚动事件

html - 两个并排的文本 block ，如有必要，截断并在一个 block 中添加省略号

javascript - 如何高亮显示选中的链接？

javascript - 在隐藏元素中初始化 Disqus 注释会导致 FF 14.0.1 出现问题

©2024 IT工具网  联系我们