Блог

Я хочу настроить динамически увеличиваемый div, содержащий разделы, каждый из которых содержит некоторую произвольную строку, которая может содержать пробелы. Если текст в div достаточно длинный, чтобы требовался перенос слов, я хочу, чтобы разрывы строк происходили между интервалами, а не внутри них. Например, в приведенном ниже примере:

 <div>
  <span>
    This contains arbitrary text.
  </span>
  <span>
    As does this.
  </span>
  <span>
    Also, this sentence.
  </span>
</div>
  

Разрывы строк должны происходить между «text.» и «As»; и «this.» и «Also», но не, например, между «contains» и «произвольный». Однако я не смог этого выполнить.

В идеале, при этом должен использоваться только CSS; Я бы предпочел избегать использования jQuery для вставки явных разрывов строк на основе вычислений ширины div и интервалов или чего-то подобного.

Я смог решить эту проблему, вопреки здравому смыслу, поместив ‘пробел:nowrap’ и ‘float: left’ в интервалы, как показано ниже:

 <div>
  <span style="white-space:nowrap;float:left">
    This contains arbitrary text.
  </span>
  <span style="white-space:nowrap;float:left">
    As does this.
  </span>
  <span style="white-space:nowrap;float:left">
    Also, this sentence.
  </span>
</div>