Question

示例文字：

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

这是Vladimir Mayakovsky一首诗的摘录，说明了他的标志性“梯形”划时间。

原件：

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

另一个例子：

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

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

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

Answer 2

[您可以尝试在各种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 3

根据需要为每一行设置float: left个div。

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

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

＆＃13;

div { float: left; }

＆＃13;

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

＆＃13;

HTML中是否可以使用“回车”而不是“回车”？

3 个答案: