如何在Firefox中优雅地破解文本？

Question

所以我有这个文本，如果它太长就需要打破：如果单词中有一个连字符或空格，它应该打破。是否有css风格可以实现这一目标？

我最接近的是使用自动换行：break-word，适用于Chrome，但不适用于Firefox。这就是它在FF中的样子：

这是我尝试过的其他事情：

最大宽度 - 这在过去对我有用，但它没有任何影响。

它应该看起来如何，就像在my code on fiddle或Chrome中一样，它打破了连字符：

以下是小提琴中的代码：

<style>
    .landing-sem-left, .landing-seo-left, .specials-top-left {
        max-width: 460px;
        padding-right: 30px;
    }
    .landing-sem-left, .landing-sem-middle, .landing-seo-left, .landing-seo-middle, .specials-top-left, .specials-top-middle {
        padding-bottom: 23px;
    }
    .landing-sem-left, .landing-sem-right, .landing-sem-middle, .landing-seo-left, .landing-seo-right, .landing-seo-middle, .specials-top-left, .specials-top-right, .specials-top-middle {
        border: 0 none;
        float: left;
        margin: 0;
        overflow: hidden;
        padding: 0;
    }
    #view-specials .heading-holder, #view-browse .heading-holder {
        margin-bottom: 18px;
        padding-right: 0 !important;
    }
    .block, .heading-holder {
        display: block;
        max-width: 461px;
        overflow: hidden;
        padding: 0 30px 0 0;
    }

    #view-specials .heading-holder, #view-browse .heading-holder {
        margin-bottom: 18px;
        padding-right: 0 !important;
        width: 100% !important;
        word-wrap: break-word;
    }
    .block, .heading-holder {
        clear: both;
        display: block;
        float: left;
        max-width: 461px;
        overflow: hidden;
        padding: 0 30px 0 0;
    }

    #landing-sem-container .h1-size1, #landing-seo-container .h1-size1 {
        font-size: 30px !important;
    }
    .heading-holder .h1-size1 {
        color: #003D77;
        font-size: 30px;
        line-height: 30px;
    }
    .heading-holder h1 span {
        border: 0 none;
        display: block;
        font-family: Helvetica,Arial,sans-serif;
        margin: 0;
        padding: 0;
        text-transform: uppercase;
    }
    .heading-holder h1 span {
        color: #008CC1;
        display: block;
        font-size: 36px;
        line-height: 38px;
        margin: 0 0 -10px;
    }
    #landing-sem-container .h1-size3, #landing-seo-container .h1-size3, #specials-top-container .h1-size3 {
        font-size: 60px !important;
        line-height: 72px !important;
        max-width: 461px;
        width: auto;
    }
    .heading-holder .h1-size3 {
        color: #008CC1;
        font-size: 54px;
        letter-spacing: -1px;
        line-height: 50px;
    }
    .heading-holder h1 span {
        display: block;
        margin: 0;
        padding: 0;
        text-transform: uppercase;
    }
</style>
<div class="landing-seo-left">

<div class="heading-holder">
    <h1>
        <span class="h1-size1">PRE-OWNED</span>
        <span class="h1-size3">
            Mercedes-Benz

        </span>

    </h1>
</div>

<div class="landing-seo-content">
    <p>

        Auto Lenders is a no-haggle, pre-owned car dealership with <a class="blue-bold-link" href="/store-locator/">5 New Jersey locations</a>. Browse our entire used Mercedes inventory below.
    </p>
</div>
<div class="landing-seo-content-smaller">
    <p>
        Our <a class="blue-bold-link" href="#">Mercedes  inventory</a> is updated often. If you don't see what you're looking for, call <strong>888-305-5968</strong> or hit ‘Subscribe to Search’ below to be notified when new matches arrive. 
    </p>
</div>

</div>

我不关心IE。

Answer 1

您真正需要做的是查看CSS3中的响应式文本。查看this以及调整页面大小时所发生情况的example。这是您问题的最佳解决方案。

Answer 2

1）您不仅要限制最大宽度，还要将.heading-holder的宽度定义为100％，以告诉浏览器仅为此元素保留此区域。否则，下面的文本块将开始在无徽标区域中流动。

.block, .heading-holder {
  display: block;
  max-width: 461px;
  width:100%; /*<-- tell browser to require all the space for this element*/
  overflow: hidden;
  padding: 0 30px 0 0;
}

2）然后通过将logo子字符拆分为div容器设置为显示：inline-block，可以轻松实现解决方法。这将显示内联徽标，只要有足够的元素位置，并且当应该没有足够的位置时，会在两行中断。很抱歉这样做了脏内联风格，但你有这个想法。：

<span class="h1-size3">
  Mercedes-<div style="display:inline-block;">Benz</div>            
</span>

这是工作js-fiddle example

Answer 3

在CSS中，white-space: normal表示可以在任何空格字符处断开字符串。但这通常不需要，因为它是默认值。但是，某些空间周围的某些特殊字符可能会阻止某些浏览器的正常包装;它真的是mess。

对于连字符，没有类似的东西，但还有其他各种技巧。实际上，相当现代版本的Firefox会将连字符视为允许后面的换行符，但只有在其两侧有足够数量的字母时 - 并且在“梅赛德斯 - 奔驰”的情况下，字母数量在连字符不够充分之后。

最安全的技术可能是使用CSS在连字符后添加ZERO-WIDTH SPACE。它充当了一条隐形线打破暗示。这个角色在旧版本的IE中会出现一些问题，但是它们太老了以至于CSS技术是安全的（它们忽略了CSS规则）。这意味着您需要像

这样的标记

<a class=part>Mercedes-</a>Benz

和CSS一样

.part:after { content: "\200B"; }

使用span而不是a一般会更好，但是你的小提琴中的CSS会导致一些不良的副作用。您应该调整这些规则，以便在此处使用span。如果你愿意的话，你可以让span只包含连字符，但是最好发明一个更好的类名。

不使用word-wrap:break-word，因为它确实打破了单词，而不是正确的单词划分。