1

仅在 Firefox 中截断长词的 div

所以我有这个文本如果太长需要中断：如果单词中有连字符或空格，它应该中断。有没有一种css风格可以做到这一点？

我得到的最接近的是使用 word-wrap:break-word，它适用于 Chrome，但不适用于 Firefox。这是它在 FF 中的样子：

使用自动换行的尴尬休息

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

Max-Width - 这在过去对我有用，但它没有影响。

这是它的外观，就像我在 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。

4

3 回答 3

1

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) 然后很容易实现一个变通方法，方法是使用设置为 display:inline-block 的 div 容器拆分徽标子词。只要元素有足够的位置，这将显示内联徽标，并在应该没有足够的位置时分成两行。很抱歉以肮脏的内联样式方式进行操作，但您已经明白了。：

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

这是有效的js-fiddle 示例

于 2013-05-07T14:10:01.423 回答
1

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

于 2013-05-07T14:01:40.137 回答
0

在 CSS 中，white-space: normal意味着字符串可以在任何空格字符处断开。但这通常不是必需的，因为它是默认设置。但是，空格周围的一些特殊字符可能会阻止某些浏览器中的正常换行；真是一团糟。

对于连字符，没有什么类似的，但还有其他各种技术。事实上，相当现代的 Firefox 版本将连字符视为允许在它之后换行，但前提是它的任一侧都有足够数量的字母 - 在“Mercedes-Benz”的情况下，字母的数量在连字符之后是不够的。

可能最安全的技术是使用 CSS 在连字符后添加一个零宽度空格。它充当不可见的换行提示。该字符在旧版本的 IE 中会引起一些问题，但它们太旧以至于 CSS 技术是安全的（它们忽略了 CSS 规则）。这意味着您需要像这样的标记

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

和 CSS 之类的

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

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

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

于 2013-05-07T16:59:47.667 回答