HTML and CSS smart auto line-break?

Question

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.

I'm aware of word-break: break-all CSS property, but I noticed before changing its value that my default browser, Dolphin browser (Android device) already did this in a smarter way

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 something like this

EDIT:

The HTML code for one box is:

            <div class="col-30 col-m-30">
                <div class="shadow-box wow fadeInRight">
                    <p><img src="/_common/_images/_soundcloudicon/dark_128.png"/></p>
                    <h3>SoundCloud</h3>
                    <div style="height: 4px; width: 128px; background-color: rgb(15, 15, 30); margin: 4px auto;"></div>
                    <a href="https://www.soundcloud.com/thelastminutemusic"><p>www.soundcloud.com/thelastminutemusic</p></a>
                </div>
            </div>

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%):

.shadow-box
{
    border-radius: 4px;

    margin: 32px;
    padding: 16px;
    box-shadow: 1px 1px 8px rgba(15, 15, 30, 0.5);
}

Answer 1

You can use <wbr> tag to break the link in a specific location.

When a word is too long, or you are afraid that the browser will break your lines at the wrong place, you can use the element to add word break opportunities.

You should add it in the place you want your text will break:

<a href="https://www.soundcloud.com/thelastminutemusic"><p>www.soundcloud.com/<wbr>thelastminutemusic</p></a>

Answer 2

What you want is this snippet of css:

.dont-break-out {

  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;

}

Shamelessly copied from CSS-Tricks : Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)