根据行长设置容器宽度

Question

我需要设置一首有左，右和完全对齐线的诗。有没有办法设置容器的宽度以匹配特定（最长）的行而不是猜测？

这里有一个模型，用于演示Word中的布局（请注意＆＃34;这是测量部分的行＆＃34;这决定了文本出现的框的大小）

如何使用CSS实现此布局？

Answer 1

您可以将段落嵌套在<div>中以获得您正在寻找的效果。包含<div>的外部应使用display: inline-block来设置其子项的宽度。

在示例代码段中，中间行是可编辑的。您可以添加或删除字符以查看容器拉伸和缩小以匹配：

＆＃13;

＆＃13;

.container {
  border: solid;
  display: inline-block;
}
.right-aligned {
  text-align: right;
}

＆＃13;

<div class="container">
  <p>left aligned</p>
  <p contenteditable="true">a full width line that sets the width of the container</p>
  <p class="right-aligned">right aligned</p>
</div>

＆＃13;

＆＃13;

＆＃13;

为了获得一条合理的线来拉伸盒子的整个宽度，你必须实现一些伪元素技巧，然后另外给出解决方案here。

在您的情况下，您将:after伪元素添加到对齐的类中，并以在段落中创建新行的方式对其进行样式设置。这应该强制文本行的行为像一个段落，并证明左右两侧。

要删除空行，您只需在对齐的段落上设置高度：

＆＃13;

＆＃13;

.container {
  border: solid;
  display: inline-block;
}
p {
  border: 1px dotted red;
}
.right-aligned {
  text-align: right;
}
.justified {
  text-align: justify;
}
.justified:after {
  content: "";
  display: inline-block;
  width: 100%;
}
.no-space {
  height: 1.2em;
}

＆＃13;

<div class="container">
  <p>left aligned</p>
  <p contenteditable="true">a full width line that sets the width of the container</p>
  <p class="right-aligned">right aligned</p>
  <p class="justified">justified text with blank line</p>
  <p class="justified no-space">justified text without the following blank line</p>
</div>

＆＃13;

＆＃13;

＆＃13;