将多行包装为一个单元

Question

假设我有两行文本：

abcdefghi
123456789

如果我把它们放在一个非常窄的 window 中，那么它们可能会像这样换行：

abcde
fghi
12345
6789

但是，我想确保我始终将第 1 行的一部分保留在第 2 行的正上方，如下所示：

abcde
12345
fghi
6789

你可以想象这两行是一个组合单元的一部分，这就是我要包装的东西（而不是单独包装每一行）。我知道这个例子可能看起来很傻，但目标应用程序是用于吉他乐谱的，所有 6 行音符都环绕在一起很重要。

到目前为止，我已经通过使用等宽字体并将每个字符“列”放入其自己的 <div> 中实现了这一点，但是这会创建一个 ton 的 div在现实世界的例子中会影响页面性能。

是否有更多 elegant/performant 方法来完成此操作，例如CSS?

更新：

这里是 misatrincado 答案的修改版本，基本上完成了我想要的：

body {
  font-family: sans-serif;
  margin: 2em;
}

.container {
  position: relative;
  word-break: break-all;
}

.line {
  position: absolute;
  line-height: 4em;
}

.line2 {
  transform: translateY(1.5em);
  color: red
}

<body>
  <div class="container">
    <span class="line line1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
    <span class="line line2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
  </div>
</body>

Answer 1

 .circle {
    width: 50px;
    height: 50px;
    border-top: 4px solid;
    border-bottom: 4px solid;
  }
  .circle_1 {
    border-color: red;
  }
  .circle_2 {
    transform:translateY(-32px);
    border-color: green;
  }

<div class="container">
  <div class="circle circle_1" />
  <div class="circle circle_2" />
</div>

我想我理解你了。你喜欢这个吗？

enter image description here

Answer 2

function chunkString(str, length) {
  return str.match(new RegExp('.{1,' + length + '}', 'g'));
}

guitar = [
  '12345678901234567890123456789012345678901234567890123456789012345678',
    '-+--+--+-+-++--++-+--+--+-+-++--++-+--+--+-+-++--++-+--+--+-+-++--++',
  '-+--+-++-+-++-+---+--+-++-+-++-+---+--+-++-+-++-+---+--+-++-+-++-+--',
  '+-++--+-+++---+-++-++--+-+++---+-++-++--+-+++---+-++-++--+-+++---+-+',
  '+--+-+-+++-----+-+--+-+-+++-----+-+--+-+-+++-----+-+--+-+-+++-----+-',
  '-----------++---------------++---------------++---------------++----',
  '++-++-----+-+----++-++-----+-+----++-++-----+-+----++-++-----+-+----'
];

pixels_per_char = 20;
default_length  = Math.floor(Number(window.innerWidth) / pixels_per_char);

// assuming all strings are same length
total_lines_groups = Math.ceil(guitar[0].length / default_length);

// Chunking guitar strings in arrays
guitar.forEach( function (value, index) {
  guitar[index] = chunkString(value, default_length);
});

i = 0;
while (i < total_lines_groups) 
{
  to_insert = '<p>';
  guitar.forEach( function (entry) {
    to_insert += entry[i] + '<br>';
  });
  to_insert += '</p>';
  
  $('#result').append(to_insert);
  
  i++;
}

body{
  font-family: 'Source Code Pro', monospace;
}

p{
  margin:2rem; 
  padding:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@1,300&display=swap" rel="stylesheet">

<div id="result"></div>

将多行包装为一个单元

Wrapping multiple lines as a single unit

html

css

responsive-design