强制父div扩大本身就是子div溢出

Question

I have this structure:

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

When div.in has overflow (for example, its content is SampletextSampletextSampletextSampletextSampletextSampletextSampletext ), it looks and behaves like this:

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

But I want it to look like this:

How can I do this?

Answer 1

It seems the div.out is expanding as it suppose to be. But the main issue is text overflowing from div.in .

You can either use word-wrap:break-word or overflow .

Below is a demo with word-wrap

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

JSFIDDLE

Answer 2

Do you require max-width:300px; because if you remove that then your .in & .out div both will have equal widths irrespective of the content.

You can also set width:100% for the .out div.

In your case:-

    .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

i see that you got answers how to keep the text inside the 300px width of the .in div. but i think you want the text to overflow outside the .in div and the .out div to wrap that text.

so here is a solution to that :

 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. first i got the html of the .in div using the html() function ( info here ) . this gave the result of SampletextSampletextSampletextSampletextSampletextSampletextSampletext

B. second, i changed the html found at point A by wrapping it withing a span so i can calculate its width

C. third, in a variable i stocked the width of the new html element, the span which exceeds the width of the .in div

D. lastly i gave the span width to the .out element

so this solution works regardless of how much text you put inside .in div. the .out div will always wrap around that text

let me know if it helps

Answer 4

Use the below css and it will work

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

    }