在 HTML 中可以没有 "carriage return" 的 "line feed" 吗？

Question

示例文本：

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

这是 Vladimir Mayakovsky 的一首诗的节选，说明了他的签名 "ladder-shaped" strophe。

原文：

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

另一个例子：

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

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

Answer 1

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

根据 OP 评论进行编辑。

如果您可以忍受将其包装在 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 2

根据需要使每一行的 div 数量达到 float: left 个。

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>

Answer 3

您可以使用带有上边距的嵌套内联块来执行此操作。

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>"; 
  });
}

在 HTML 中可以没有 "carriage return" 的 "line feed" 吗？

Is "line feed" without "carriage return" possible in HTML?

html

css

newline