強制父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; 

    }