强制父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

你需要最大宽度：300px; 因为如果删除它，那么你的.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

我看到你得到了如何将文本保持在.in div的300px宽度内的答案。 但我认为你希望文本溢出.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> 

答：首先我得到了html中的.in使用div html()函数（ 信息在这里 ）。 这给出了SampletextSampletextSampletextSampletextSampletextSampletextSampletext的结果

B.第二，我通过用一个span包装来改变在A点找到的html ，这样我就可以计算它的width

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

D.最后我给了.out元素的span宽度

所以这个解决方案的工作，无论你多么文本放到里面.in格。 .out div将始终环绕该文本

让我知道它是否有帮助

Answer 4

使用下面的CSS，它会工作

    .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;

    }