时间戳

首页 > 解决方案 > 将多行包装为一个单元

html - 将多行包装为一个单元

问题描述

假设我有两行文字：

abcdefghi
123456789

如果我将它们放在一个非常窄的窗口中，那么它们可能会如下包装：

abcde
fghi
12345
6789

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

abcde
12345
fghi
6789

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

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

有没有更优雅/更高效的方式来实现这一点，例如使用 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>

标签： htmlcssresponsive-design

解决方案

 .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>

我想明白你了。你喜欢这个？

在此处输入图像描述

推荐阅读