Question

我在网站上有一个电话号码。它在笔记本电脑上看起来不错，但在移动设备上，有一半的数字会跳到下一行。它看起来并不好看。

那么如何创建仅适用于移动设备尺寸屏幕的换行符？

我在编码方面不是很有经验，所以请具体:)非常感谢您的帮助！

Answer 1

您可以查看CSS word-break属性，以防止单词/字符串被切成两半。如果它是您想要使用的专门换行符，那么将类附加到<br class="br-on-mobile">等元素并将其设置为CSS中的display: none应该可以防止它正常执行任何操作。然后，您可以使用媒体查询来显示特定移动屏幕尺寸的换行符，例如：

.br-on-mobile {
    display: none;
}

@media screen and (<Your conditions here>) {
    .br-on-mobile {
        display: static;
    }
}

编辑：static是无效的显示值。使用继承应该解决问题。见this Fiddle

编辑：您网页的标题也必须有<meta name="viewport" content="width=device-width, initial-scale=1">，以便正确缩放/应用媒体查询。

您还可以通过将数字包装在span元素中并在移动设备上将其设置为display: block来实现此目的，尽管下面的媒体查询问题也适用于此。

Answer 2

如果您使用Bootstrap 4，只需使用以下中断：

<br class="d-md-none">

Answer 3

为什么不将换行符作为
标记中的类？

<br class="mobile-break">

和CSS

    @media screen and (min-width: 600px)  {
        .mobile-break { display: none; }
    }

Answer 4

添加数字而不是空格，这是不间断的空格，这将防止添加新行。

Answer 5

这应该适用于布尔玛：<br class="is-hidden-desktop" />

仅在手机上换行

5 个答案: