Question

我有一个自己制作的网格系统，我正在使用margin进行排列。

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; }

此处来自column：

  .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 1或2等较小的列中放置data-size或其他标题时，就会发生这种情况：

enter image description here

新的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>

如您所见，column的宽度仍然正常。您可以在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/

另见：

CSS在小列上的文本溢出

1 个答案: