强制父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＆amp;无论内容如何，​​.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 div的.in宽度内的答案。但我认为你希望文本溢出.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。第二，我更改了在A点找到的html，用span包裹它，这样我就可以计算出width

C。第三，在我存储新width元素的html的变量中，span超过了width的{​​{1}} .in div

D。最后我将span宽度赋予.out元素

所以无论你在.in div中放入多少文本，这个解决方案都能正常工作。 .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;

    }