html - 小列上的文本两侧的 CSS 溢出

Question

我有一个自己制作的网格系统，我用 margins 做的排水沟。

它的 HTML 标记如下所示:

        <div class="row">
            <div class="column" data-size="1"></div>
            <div class="column" data-size="1"></div>
            <div class="column" data-size="1"></div>
            <div class="column" data-size="1"></div>
            <div class="column" data-size="1"></div>
            <div class="column" data-size="1"></div>
            <div class="column" data-size="1"></div>
            <div class="column" data-size="1"></div>
            <div class="column" data-size="1"></div>
            <div class="column" data-size="1"></div>
            <div class="column" data-size="1"></div>
            <div class="column" data-size="1"></div>
        </div>

data-size 属性决定了列的大小应该是多少，从 1 到一行中的最大列数(在我的例子中是 12，但我可以改变它) .

这是该行的 CSS 属性:

.row {
  overflow: hidden;
  margin-bottom: 1.95313%;
  *zoom: 1; }
  .row:before, .row:after {
    content: "";
    display: table; }
  .row:after {
    clear: both; }

这里来自列:

  .row > .column {
    min-height: 75px;
    background: #ddd;
    position: relative;
    float: left;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    margin-left: 0.97656%;
    margin-right: 0.97656%; }

每当我将 h1 或其他标题放在较小的列中时，例如 data-size 1 或 2，就会发生这种情况:

新的 html 标记:

        <div class="row">
            <div class="column" data-size="1"><h1>Header 1 Header 1 Header 1</h1></div>
            <div class="column" data-size="1"></div>
            <div class="column" data-size="1"></div>
            <div class="column" data-size="1"></div>
            <div class="column" data-size="1"></div>
            <div class="column" data-size="1"></div>
            <div class="column" data-size="1"></div>
            <div class="column" data-size="1"></div>
            <div class="column" data-size="1"></div>
            <div class="column" data-size="1"></div>
            <div class="column" data-size="1"></div>
            <div class="column" data-size="1"></div>
        </div>

如您所见，列的宽度仍然正常。您可以在 background-color 上看到它。

我尝试将 overflow: hidden 放在 column 的 CSS 属性上，但这只是隐藏了一部分文本。

如何使文本改变大小以适应列？

这只发生在 header 上，在 paragraph 上它不会溢出。

Demo here

Answer 1

一种选择是使用 word-wrap: break-word :

.row > .column {
    word-wrap: break-word;
}

示例:http://jsfiddle.net/m32F5/1/

另见:

• Can I use - CSS3 word-break
• Can I use - CSS Hyphenation