强制父div来扩大自身的孩子div有溢出

Question

我有这样的结构：

.out { 
 
    display: inline-block; 
 
    border: 2px solid green; 
 
} 
 

 
.in { 
 
    display: inline-block; 
 
    max-width: 300px; 
 
    border: 2px solid red; 
 
}

<div class="out"> 
 
    <div class="in"> 
 
    Sample text 
 
    </div> 
 
</div>

当div.in已经溢出（例如，其内容SampletextSampletextSampletextSampletextSampletextSampletextSampletext），它的外观和行为像这样：

.out { 
 
    display: inline-block; 
 
    border: 2px solid green; 
 
} 
 

 
.in { 
 
    display: inline-block; 
 
    max-width: 300px; 
 
    border: 2px solid red; 
 
    overflow: visible; 
 
}

<div class="out"> 
 
    <div class="in"> 
 
    SampletextSampletextSampletextSampletextSampletextSampletextSampletext 
 
    </div> 
 
</div>

但我希望它看起来像这样：

我怎样才能做到这一点？

Answer 1

它似乎div.out正在扩大，因为它假设是。但主要问题是从div.in溢出的文本。可以使用word-wrap:break-word或overflow。

下面是word-wrap

.in { 
    display: inline-block; 
    max-width: 300px; 
    border: 2px solid red; 
    word-wrap: break-word; 
} 

JSFIDDLE

Answer 2

你需要最大宽度演示：300像素;因为如果你删除它，那么你的.in & .out div都将具有相同的宽度，而不管内容如何。

您还可以为.out div设置宽度：100％。

在您的情况： -

.out { 
     display: inline-block; 
     border: 2px solid green; 
     width:100%; 
    } 

    .in { 
    display: inline-block; 
    max-width: 300px; 
    border: 2px solid red; 
    overflow: visible; 
    } 


    <div class="out"> 
    <div class="in"> 
     SampletextSampletextSampletextSampletextSampletextSampletextSampletext 
    </div> 
    </div> 

Answer 3

我看到你有答案，如何保持文本300px宽度.in div中。但我认为你想让文字在.in div和.out div之外溢出来包装该文本。

所以这里是一个解决方案：

var text = $(".in").html() 
 
var newtext = $(".in").html("<span class='textwidth'>" + text + "</span>") 
 
var widthText = $(".textwidth").width() 
 
$(".out").width(widthText)

.out { 
 
    display: inline-block; 
 
    border: 2px solid green; 
 

 
} 
 

 
.in { 
 
    display: block; 
 
    max-width: 300px; 
 
    border: 2px solid red; 
 
    
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="out"> 
 
    <div class="in"> 
 
    SampletextSampletextSampletextSampletextSampletextSampletextSampletext 
 
    </div> 
 
</div>

A.首先我使用html()功能（info here）得到了.in div的html。这给了的SampletextSampletextSampletextSampletextSampletextSampletextSampletext

B.秒结果，我通过包装它withing一个span改变A点处发现html，所以我可以计算出其width

C.第三，在变量i放养新html元件的width，这超过了.in DIV

D.最后我给span宽度与.out元件所以这

的width的span解决方案工作，无论你把多少文字放在.in div内。该.out DIV永远环绕文本

让我知道如果它下面的CSS有助于

Answer 4

使用，它会工作

.out { 
     display: inline-block; 
     display: inline-block; 
     border: 2px solid green; 
     width:100px; 
     height:100px; 
     overflow:auto; 
    } 

    .in { 
     display: inline-block; 
     max-width: 20px; 
     max-height:20px; 
     border: 2px solid red; 

    }