HTML中是否可以“换行”而没有“回车”？

Question

示例文本：

And you, 
         could you have played 
                               a nocturne
On a waterspout for a flute?

这是Vladimir Mayakovsky 的一首诗的摘录，展示了他标志性的“梯形”乐句。

原文：

А вы
     ноктюрн сыграть
                     могли бы
На флейте водосточных труб?

另一个例子：

Простенького паренька
подцепила
          барынька.
Он работать,
             а ее
                  не удержать никак -
бегает за клёшем
                 каждого бульварника.
Что ж,
       сиди
            и в плаче
                      Нилом нилься.

基本上有没有回车的换行。我使用预先格式化的文本来展示这个概念。是否可以在 HTML 中实现常规比例字体？

Answer 1

您可以使用带有上边距的嵌套内联块来做到这一点。

span { 
  margin-top: 1em; 
  display: inline-block; 
  vertical-align: top; 
}

<div>А вы<span>ноктюрн сыграть<span>могли бы</span></span></div>
<div>На флейте водосточных труб?</div>

将所需的^ 标记转换为这种嵌套跨度格式的逻辑是：

function preprocess(poem) {
  return poem.replace(/\^.*$/m, function(m) { 
    return "<span>" + preprocess(m.slice(1)) + "</span>"; 
  });
}

Answer 2

[您可以尝试在各种跨度元素中使用正负垂直对齐：]

在 OP cmets 之后编辑。

如果您可以忍受将其包装在 div 中并添加段落，您可以使用符号作为换行符并自动循环它们：

str = $('#input').html();
str = str.replace(/\^/, '<span>').replace(/\^/g, '</span><span>').replace(/<\/p>/, '</span><\/p>');
console.log(str);
$('#output').html(str);
para = $('#output p');
para.each(function() {
  span = $(this).find('span');
  for (var j = 0; j < span.length; j++) {
    span[j].style.verticalAlign = -90 * (j + 1) + '%';
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="input" style="display:none">
  <p>А вы ^ноктюрн сыграть ^могли бы</p>
  <p>На флейте водосточных труб?</p>
  <p>А вы ^ноктюрн сыграть ^могли бы</p>
  <p>На флейте водосточных труб?</p>
  <p>А вы ^ноктюрн сыграть ^могли бы</p>
  <p>На флейте водосточных труб?</p>
</div>
<div id="output"></div>

[您可能需要使用百分比来完全按照您想要的方式得到它。]

Answer 3

根据需要使每一行的float: left div 数尽可能多。

• Div 1 持有And you,
• Div 2 持有<br>could you...
• Div 3 持有<br><br>a nocturne

假设您可以在输入/导入时正确解析它，那么这种方式应该可以处理任何诗歌。

div { float: left; }

<div>And you,</div>
<div><br>could you have played</div>
<div><br><br>a nocturne</div>