Question

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

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

据我所知，这种行为很可能与浏览器本身有关。我想知道是否有办法在所有浏览器上实现相同的结果，而不是使用CSS word-break属性，这将导致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类（哇和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：

insert into tbl_teacher
    (fName,
    lName,
    email,
    cNo)
    select s.fName,
           s.lName,
           s.email,
           s.cNo 
    from tbl_student s

从CSS-Tricks中无耻地复制：Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)

HTML和CSS智能自动换行？

2 个答案: