title: CSS - Paragraph is stretching the width of the DIV
body: <p>Currently I have a paragraph inside a div. The div stretches with I put in a long text as the paragraph when viewed in mobile mode (768px). When I replaced the long text with a short text for example 'Box One', it does not stretch the div as I have not exceed the div width. How can I make the paragraph break into a new line when it reaches the div width when viewed in mobile mode? I have attached my jsfiddle as an example.</p>
  
  <p><a href="https://jsfiddle.net/ModestGrey/az4ca9j8/" rel="nofollow">https://jsfiddle.net/ModestGrey/az4ca9j8/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="boxes"&gt;
  &lt;div class="one box"&gt;&lt;p&gt;xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&lt;/p&gt;&lt;/div&gt;
    &lt;div class="two box"&gt;&lt;p&gt;Box Two&lt;/p&gt;&lt;/div&gt;
    &lt;div class="three box"&gt;&lt;p&gt;Box Three&lt;/p&gt;&lt;/div&gt;
    &lt;div class="four box"&gt;&lt;p&gt;Box Four&lt;/p&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.boxes {
    width: 50%;
    margin: 0 auto;
  }
  
  .box {
    display: inline-block;
    width: 24%;
    height: 15em;
    color: #fff;
  }
  
  .one {
    background: #333;
  }
  
  .two {
    background: #fff;
    color: #333;
  }
  
  .three {
    background: #aaa;
  }
  
  .four {
    background: #dc002e;
  }
  
  @media only screen and (max-width:48em) {
    .boxes {
      display: table;
      width: 100%;
    }
    .box {
      display: block;
      width: 100%;
    }
    .three {
      display: table-caption;
    }
    .four {
      display: table-caption;
    }
    .one {
      display: table-caption;
    }
    .two {
      display: table-caption;
    }
  }
  </code></pre>