Я сделал код, чтобы показать проблему: http://codepen.io/anon/pen/dMbzop

Это как

<div id="demowrapper">
    <div class="rtecenter" style="text-align: center;">&nbsp;</div>
    <p class="rtecenter"><span style="font-size:14px"><span style="color:rgb(72, 155, 201)"><span style="font-family:avenirltstd-heavy">Good Morning&nbsp;</span></span></span></p>
    <p class="rtecenter"><span style="font-size:14px"><span style="background-color:rgb(255, 255, 255); font-family:avenirltstd-book">Harnessing the vivacity of your body’s circadian rhythm,&nbsp;</span><span style="font-size:16px"><span style="font-family:didotltpro-roman">FONDATION</span></span><span style="background-color:rgb(255, 255, 255); font-family:avenirltstd-book">&nbsp;brings you positive energy right from the start.</span></span></p>
    <div class="rtecenter">&nbsp;</div>
</div>

И CSS:

#demowrapper {
  max-width: 440px;
  background-color: #666;
}

Так почему же «ритм» переносится на следующую строку вместо того, чтобы заполнять строку выше?

Это проблема одного из наших клиентов. Я не могу понять, почему браузеры так себя ведут. Есть идеи?

2
SoBiT 25 Фев 2016 в 16:38

3 ответа

Лучший ответ

Вы используете &nbsp; в своей строке, что по сути создает одну длинную строку текста, которая не сломается, если вы ее не заставите:

rhythm,&nbsp;</span><span style="font-size:16px"><span style="font-family:didotltpro-roman">FONDATION</span></span><span style="background-color:rgb(255, 255, 255); font-family:avenirltstd-book">&nbsp;brings

Либо замените &nbsp; на обычные пробелы:

#demowrapper {
  max-width: 440px;
  background-color: #666;
}
<div id="demowrapper">
<div class="rtecenter" style="text-align: center;">&nbsp;</div>
<p class="rtecenter"><span style="font-size:14px"><span style="color:rgb(72, 155, 201)"><span style="font-family:avenirltstd-heavy">Good Morning&nbsp;</span></span></span></p>
<p class="rtecenter"><span style="font-size:14px"><span style="background-color:rgb(255, 255, 255); font-family:avenirltstd-book">Harnessing the vivacity of your body’s circadian rhythm, </span><span style="font-size:16px"><span style="font-family:didotltpro-roman">FONDATION</span></span><span style="background-color:rgb(255, 255, 255); font-family:avenirltstd-book"> brings you positive energy right from the start.</span></span></p>
<div class="rtecenter">&nbsp;</div>
</div>

So why is 'rhythm' on a new line?

Или принудительно взломайте что-то вроде word-break: break-all;:

#demowrapper {
  max-width: 440px;
  background-color: #666;
}
p {
  word-break: break-all;
}
<div id="demowrapper">
  <div class="rtecenter" style="text-align: center;">&nbsp;</div>
  <p class="rtecenter"><span style="font-size:14px"><span style="color:rgb(72, 155, 201)"><span style="font-family:avenirltstd-heavy">Good Morning&nbsp;</span></span>
    </span>
  </p>
  <p class="rtecenter"><span style="font-size:14px"><span style="background-color:rgb(255, 255, 255); font-family:avenirltstd-book">Harnessing the vivacity of your body’s circadian rhythm,&nbsp;</span><span style="font-size:16px"><span style="font-family:didotltpro-roman">FONDATION</span></span>
    <span
    style="background-color:rgb(255, 255, 255); font-family:avenirltstd-book">&nbsp;brings you positive energy right from the start.</span>
      </span>
  </p>
  <div class="rtecenter">&nbsp;</div>
</div>

So why is 'rhythm' on a new line?
7
j08691 25 Фев 2016 в 13:44

Причиной этого является &nbsp;. Строка со следующим словом не подошла бы.

«HTML-объект является неразрывным или жестким пространством. Он отображается как обычное пространство» «, но предотвращает перенос строки» оттуда: https://en.wikipedia.org/wiki/Wikipedia:Line-break_handling#.26nbsp.3B

1
enthus1ast 25 Фев 2016 в 13:44

Я думаю, что проблема заключается в отсутствии пробелов между словами в коде пера, если вы добавляете пробел (а не &nbsp;), он работает так, как вы хотите (также не забудьте поставить пробелы между интервалами, чтобы переносить вещи на другую строку.

Основная проблема, похоже, в том, что у вас есть одно длинное слово на многих промежутках.

1
Daniel Casserly 25 Фев 2016 в 13:44