Question

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

但是..在孩子的浮动左侧div中，我的文字超出了它的宽度。

我该如何避免这种行为？

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

此问题在于您已在white-space: nowrap;上设置#main。这是由p标记继承的，导致文本无法包装。

将white-space设置为类似normal的内容会导致文本按照您的预期进行换行。

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

Answer 2

从white-space: nowrap;

中删除#main

Answer 3

您可以使用white-space: normal;，这会将文本换行到下一行。

您的代码应如下所示：

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

希望这有帮助！

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

3 个答案: