html - 如何正确显示div内的大文本

Question

抱歉，但我想我现在忘记了 css，我找不到解决这个问题的线索，我的问题是有什么方法可以在 leftSide div 中相应地显示和响应吗？

HTML

<div class='mainPage'>
        <div class="leftSide">
            <h2 class='md-display-4'>EventUpside</h2>
        </div>
        <div class="rightSide"></div>
    </div>

CSS

.mainPage {
        width: 100%;
        height: auto;
        background: red;
    }

    .leftSide {
        width: 35%;
        height: auto;
        float: left;
        background: rgba(0, 0, 0, .2);
    }

    .rightSide {
        width: 65%;
        height: 40px;
        float: right;
        background: rgba(0, 0, 0, .6);
    }
.md-display-4 {
  font-size: 11.2rem;
  font-weight: 300;
  letter-spacing: -.01em;
  line-height: 11.2rem;
}

Fiddle

Answer 1

不完全确定这是否是你想要的，但尝试设置

word-wrap: break-word;

到您的 .md-display-4 CSS 属性

fiddle :https://jsfiddle.net/35so3w07/3/