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

如果删除.leftSide的宽度值，则div将与其内容一样大。或者您是否希望将div中的字体与定义的宽度相匹配。像

这样的东西

word-wrap: break-word;

<。> .md-display-4内部可以提供帮助。或者字体的大小是否会改变？

Answer 2

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

word-wrap: break-word;

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

小提琴：https://jsfiddle.net/35so3w07/3/

Answer 3

您可以查看：

http://dev.w3.org/csswg/css-values/#viewport-relative-lengths

随着屏幕缩放，文字也会缩放。

Answer 4

将word-wrap: break-word;添加到.leftSide。

这将使包含的文本在到达div的边缘时通过断开文本而保留在div中。如果您更改div的宽度，它也会起作用 - div越宽，您可以在一行中显示的文本越多。

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

4 个答案: