主页 / 问题 / 1569371
Accepted
Gleb Kublahanov
Asked:2024-02-28 20:21:27 +0000 UTC2024-02-28 20:21:27 +0000 UTC

如何使<p>块保持在同一水平面上？

  • 772

我想写一个网站，你可以在其中阅读诗歌，左边是原文，右边是翻译。我有这样的代码

<body>
  <div class="container">
    <div class="text" id="left-text">
      <p>
        some text on the left
      </p>
      <p>
        some text on the left
      </p>
      <p>
       some text on the left
      </p>
    </div>
    <div class="text" id="right-text">
      <p>
        some text on the right
      </p>
      <p>
        some text on the right
      </p>
      <p>
       some text on the right
      </p>
    </div>
  </div>
</body>

然而，翻译中的文本可能比原始文本长（反之亦然），因此失去了同步性：左侧的文本与右侧的文本不对应。如何保证<p>左右段落始终在同一水平线上？据我了解，在这种情况下使用表格方法不符合 html 规范，因为诗歌本质上不是表格数据。

html

2 个回答

  1. 严格来说，<p>对每一行使用在语义上也不是正确的解决方案。然而，假设你是这样的。

    您需要禁用原文和译文中的换行符。在这种情况下，每一行将占据一行：

    p {
  white-space: nowrap;
}

    与此同时，如果该行突然变得太长，您可以修剪它，并以省略号结尾：

    p {
  overflow: hidden;
  text-overflow: ellipsis;
}

    前面的代码仅适用于单行文本。如果队伍很长，这可能会很不方便。您可以分配空间为 2 行，并将文本限制为 2 行：

    p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;  
  overflow: hidden;
  max-height: 2.4em;
}

    注意线路max-height: 2.4em;。它指定 2 行的高度限制。两条线的高度取决于属性的状态line-height，如果没有 JavaScript，就很难知道该属性中设置了什么值，是否使用浏览器默认值或是否已更改它是不可能的。在我的代码中，我假设line-height: 1.2. 那些。2 * 1.2 = 2.4。情况并非总是如此，因此您需要进行硬编码line-height，否则可能会出现您意想不到的效果。

    • 1
  2. Best Answer

    不更改标记的选项：

    .container {
  display: grid;
  grid-template-columns: auto auto;
  gap: 0 1em;
  grid-auto-flow: column;
}

.text {
  display: contents;
}

#left-text {
  grid-column: 1;
}

#right-text {
  grid-column: 2;
}

p {
  grid-column: inherit;
  margin: 0;
}
    <div class="container">
  <div class="text" id="left-text">
    <p>some text on the left</p>
    <p>some text on the left</p>
    <p>some text on the left</p>
  </div>
  <div class="text" id="right-text">
    <p>some text on the right</p>
    <p>some text on the right long long long long long long long long  long long long long long long long long</p>
    <p>some text on the right</p>
  </div>
</div>

    • 0

相关问题