通过移动设备打开网站时将字符串移动到新段落

Question

我有一个奇怪的问题，在我的网站上我有一个字符串，让我们说：

'contact number 123-456-789', 

当网站在移动设备上打开时，该数字会被拆分以适应屏幕，因此它看起来像这样：

123-456
-789.

当网站通过手机打开时，我能以某种方式在新行中显示此字符串吗？

感谢您的帮助，

Answer 1

将号码换成<span>：

<span class="own-line">123-456-789</span>

然后使用媒体查询（css）强制它下拉到自己的行：

<style>@media (max-width: 375px) { .own-line { display: block } }</style>

Answer 2

我不知道你的标记，所以我会给出一个总体策略。

为避免分割字符串，请使用：

＆＃13;

＆＃13;

.short{
    color: blue;
}
.string{
    white-space: nowrap; /*this is the important line*/
    color: red;
  }

＆＃13;

<span class="short">short string </span>
<span class="string">contact number 123-456-789</span>

＆＃13;

＆＃13;

＆＃13;

Here a working jsfiddle example缩小结果空间，以查看span.string在新行中的显示方式。