根据线条长度设置容器的宽度

Question

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

下面是一个演示Word中布局的样机模型（注意“这是测量截面的线条”，它决定了文本出现的方框的大小）。

我怎样才能做到这一点的布局，CSS？

Answer 1

您可以在<div>之内嵌套段落以达到您要查找的效果。包含<div>的外部应该使用display: inline-block来设置其子级设置的宽度。

在示例代码段中，中间一行是可编辑的。您可以添加或删除角色看到容器的拉伸和收缩，以匹配：

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

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

为了得到一个合理的线伸展盒子的全宽，你必须实现一些伪元素诡计，还有另一个解决方案here。

在你的情况下，你添加一个:after伪元素到你合理的类，并以它在你的段落内创建一个新行的方式来设置它。这应该强制文本的行为像一个段落，并证明左右两侧。

要摆脱空行，你可以只设置一个高度上的两端对齐的段落：

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

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