HTML 和 CSS 智能自动换行？

Question

我正在努力让我的网站在桌面和移动设备上正确显示。我现在面临的问题是文本流出容器(以及移动浏览器边界)。正文由一些网址组成。

我知道 word-break: break-all CSS 属性，但我在更改其值之前注意到我的默认浏览器 Dolphin 浏览器(Android 设备)already did this in a smarter way

据我了解，此行为很可能与浏览器本身有关。我想知道是否有一种方法可以在所有浏览器上实现相同的结果，而不是使用 CSS 分词属性，这将导致 something like this

编辑:

一个盒子的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 类(wow 和 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> 标记以断开特定位置的链接。

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.

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

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