文本没有div（CSS）

Question

我在手机上有文字标题

这是代码

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

在片段上所有确定和换行符

但是在移动设备上，它会脱离div

以下是它的外观屏幕

我无法理解，为什么换行不起作用以及如何在移动设备上修复此问题？

非常感谢你的帮助。

Answer 1

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

Answer 2

只需从代码中删除white-space: nowrap;，就像其他人在评论中所说的那样。

.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;
  width: 500px;
}

.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;
  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>

Answer 3

删除空格：nowrap或只是尝试这个，如果它不起作用：

white-space: normal; //instead of white-space nowrap in your css class .ui-header .ui-title, .ui-footer .ui-title {

Answer 4

我认为你的问题不会只用白色空间来解决：换行/正常。因为你的遗言没有中断。因此，为了更安全，您还可以使用以下属性以及移动白色空间

text-overflow: ellipsis;