仅在手机上换行

Question

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

那么我怎样才能创建一个只能在移动设备大小的屏幕上工作的换行符呢？

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

Answer 1

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

<br class="mobile-break">

和在CSS中

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

Answer 2

如果您使用 Bootstrap 4，只需像这样使用中断：

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

Answer 3

您可以查看CSS word-break属性以防止单词/字符串被切成两半.如果它是你想要使用的专门换行符,那么将一个类附加到元素上,<br class="br-on-mobile">并display: none在CSS中设置它应该阻止它正常做任何事情.然后,您可以使用媒体查询在特定的移动屏幕尺寸上显示换行符,例如:

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

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

编辑:static显示无效值.使用继承应该解决问题.看到这个小提琴

编辑:页面标题还必须<meta name="viewport" content="width=device-width, initial-scale=1">允许正确缩放/应用媒体查询.

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