HTML和CSS智能自动换行？

Question

我很难在桌面和移动设备上正确显示我的网站。 我现在面临的问题是文本流出容器（并且移出浏览器界限）。 该文由一些网站地址组成。

我知道word-break：break-all CSS属性，但是在更改其值之前我注意到我的默认浏览器Dolphin浏览器（Android设备） 已经以更智能的方式实现了这一点

我知道这种行为很可能与浏览器本身有关。 我想知道是否有办法在所有浏览器上实现相同的结果，而不是使用CSS word-break属性，这将导致类似这样的事情

编辑：

一个框的HTML代码是：

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

这是使用的CSS类（哇和fadeInRight来自动画CSS文件，col-30设置div的宽度为50％）：

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

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

Answer 1

您可以使用<wbr>标记来断开特定位置的链接。

如果单词太长，或者您担心浏览器会在错误的位置断行，则可以使用该元素添加分词机会。

您应该将它添加到您希望文本中断的位置：

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

Answer 2

你想要的是这段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;

}

从CSS-Tricks中无耻地复制： 处理长字和URL（强制中断，连字符，省略号等）