Html 小栏文本的侧面CSS溢出

我有一个自己制作的网格系统，我用

margin

s做的水槽

其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>

下面是

列中的
：

  .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时，就会发生以下情况：


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


收割台1收割台1收割台1

如您所见，
列
s的宽度仍然可以正常工作。您可以在
背景色上看到这一点

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

如何使文本的大小发生变化以适合列

这只发生在
标题
上，在
段落
上，它不会溢出。

一个选项是使用：

例如：

另见：




“如何使文本改变大小以适合列？”使用合适的字体大小？您不能或。。试试这个？谢谢，这是一种常用的方法还是降低
字体大小更好？顺便说一句，5分钟内接受答案。@Bas-最好使用较小的字体大小，并且使用不会将大的东西放在小东西里面的设计。但是用户可能会增加文本大小，如果它没有中断就好了。你是对的，我想我暂时不使用
wordwrap:break word
，让用户减少
字体大小。但我肯定会接受你的回答。
        <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>

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