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 class（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> 标签在特定位置打断 link。

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>

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-技巧：Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)

HTML 和 CSS 智能自动换行？

HTML and CSS smart auto line-break?

html

css

line-breaks