HTML和CSS智能自动换行？

Question

我在努力让我的网站在桌面和移动设备上都正确显示。 我现在面临的问题是文字流出容器（并流出移动浏览器范围）。这些文字由一些网站地址组成。

我知道CSS属性word-break: break-all，但在更改其值之前，我注意到我的默认浏览器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类（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);
}

- Sneppy

---

请在这里放置一些代码！ - Pedram

@jiff 更新了帖子。 - Sneppy

如果我理解你的问题正确，你是想为所有的URL实现以下格式：www.domain.com/(换行符)restoftheurl/？ - Christopher Thomas

Answer 1

你可以使用 <wbr> 标签在特定位置断开链接。

当单词太长或者你担心浏览器会在错误的位置断开你的文本时，你可以使用 <wbr> 元素添加单词换行点。

你应该在希望文本断开的位置添加它：

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

- dimshik

---

谢谢，它像魔法一样奏效！我认为这是在这种情况下最好的解决方案。 - Sneppy

Answer 2

你需要的是这段CSS代码：

```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 自 CSS-Tricks：处理长单词和URL（强制换行，连字符，省略等）

- jacmoe