html - 如何避免超出 DIV 宽度限制的文本

Question

我有一个使用“display: inline-block”和“position:absolute”的父 div 结构。这一点很重要，无法更改!

但是.. 在 child float 的左侧 div 中，我的文本超出了它的宽度。

如何避免这种行为？

fiddle :https://jsfiddle.net/s8a818vw/

CSS:

#main {
    width:100%;
    height:400px;
    overflow: hidden;
    white-space: nowrap;
    background:pink;
}

.sub {
    width:600px;
    display: inline-block;
    height:400px;
    position:absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
}

.sub-text {
    width:70%;
    height:100%;
    float:left;
    background:lime;
    overflow: none; 
}

.sub-img {
    width:30%;
    height:100%;
    float:right;
    background:red;
    display:flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-content: flex-end;
    align-items: center;    
}

HTML:

<div id="main">

    <div class="sub">

        <div class="sub-text">

            <h1>Header</h1>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sit amet tellus vitae nisi feugiat malesuada. Phasellus semper vehicula ante. Pellentesque ut finibus nisl. Cras tempus, eros ut aliquam mollis, metus diam efficitur neque, non pellentesque eros mi a felis. In lectus ipsum, rutrum at risus eget, faucibus sodales ipsum. Nam vel interdum libero. Donec ac lacus interdum, rutrum neque sit amet, vestibulum tellus.</p>

            <a href="#">My Link</a>

        </div>

        <div class="sub-img">img 1</div>

    </div>

</div>  

Answer 1

这里的问题是您在 #main 上设置了 white-space: nowrap;。这是由您的 p 标记继承并导致文本不换行。

将 white-space 设置为类似于 normal 的值将导致文本按您预期的方式换行。

.sub-text{
    white-space: normal;
}