javascript - 文本超出 div (CSS)

Question

我在手机上有带文字的标题

这是代码

.ui-bar-b, .ui-page-theme-b .ui-bar-inherit, html .ui-bar-b .ui-bar-inherit, html .ui-body-b .ui-bar-inherit, html body .ui-group-theme-b .ui-bar-inherit {
    background-color: #1d1d1d;
    border-color: #1b1b1b;
    color: #fff;
    text-shadow: 0 1px 0 #111;
    font-weight: 700;
}
.ui-header, .ui-footer {
    border-width: 1px 0;
    border-style: solid;
    position: relative;
}

#step_4_0 .ui-title, .payment-page .ui-title {
    overflow: visible;
    margin: 0 15%;
    word-wrap: break-word;
}
.ui-header .ui-title, .ui-footer .ui-title {
    font-size: 1em;
    min-height: 1.1em;
    text-align: center;
    display: block;
    margin: 0 30%;
    padding: .7em 0;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    outline: 0!important;
}
.ui-header .ui-title {
    margin: 0 15% !important;
}

<div data-role="header" data-theme="b" class="noflow ui-header ui-bar-b" role="banner">
      <h1 class="ui-title" role="heading" aria-level="1">Betal senest kl 23.30 i dagfffdfskjdbfksdbfksdjbdfksdbfkjsdbjfksjbdfkjbsdfkjbsdkfjbsdkjfbsdkjfbksdbfkjsdbf</h1>
  </div>

在片段上一切正常和换行符

但是在手机上它会脱离div

这是它的外观屏幕

我不明白，为什么换行符不起作用以及如何在移动设备上解决这个问题？

非常感谢您的帮助。

Answer 1

根据我的评论，您设置了 white-space: nowrap，它告诉浏览器永远不要将溢出换行/换行。删除该行将解决您的问题。