title: HTML and CSS smart auto line-break?
body: <p>I'm struggling to make my website display correctly on both desktop and mobile devices.
  The problem I'm facing right now is text flowing out of container (and out of mobile browser bounds). The text is composed by some website adresses.</p>
  
  <p>I'm aware of <em>word-break: break-all</em> CSS property, but I noticed before changing its value that my default browser, Dolphin browser (Android device) <a href="http://i.stack.imgur.com/kIkmj.jpg" rel="nofollow">already did this in a smarter way</a></p>
  
  <p>I understand that this behaviour is likely to be related to the browser itself. I was wondering if there's a way to achieve the same result on all browsers, rather than using CSS word-break property that will result in <a href="http://i.stack.imgur.com/2sam1.png" rel="nofollow">something like this</a></p>
  
  <p>EDIT:</p>
  
  <p>The HTML code for one box is:</p>
  
  <pre><code>            &lt;div class="col-30 col-m-30"&gt;
                  &lt;div class="shadow-box wow fadeInRight"&gt;
                      &lt;p&gt;&lt;img src="/_common/_images/_soundcloudicon/dark_128.png"/&gt;&lt;/p&gt;
                      &lt;h3&gt;SoundCloud&lt;/h3&gt;
                      &lt;div style="height: 4px; width: 128px; background-color: rgb(15, 15, 30); margin: 4px auto;"&gt;&lt;/div&gt;
                      &lt;a href="https://www.soundcloud.com/thelastminutemusic"&gt;&lt;p&gt;www.soundcloud.com/thelastminutemusic&lt;/p&gt;&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>and this is the CSS class used (wow and fadeInRight are from an animation CSS file and col-30 set the width of the div to 50%):</p>
  
  <pre><code>.shadow-box
  {
      border-radius: 4px;
  
      margin: 32px;
      padding: 16px;
      box-shadow: 1px 1px 8px rgba(15, 15, 30, 0.5);
  }
  </code></pre>