Question

我有几个div，每个都有一个标题和文字。一些标题具有手动设置的<br />和相邻的文本段落。我希望文本的宽度与标题的最宽部分相同。

如何使用CSS完全执行此操作？

＆＃13;

.flex-text {
        align-items: center;
        display: flex;
        justify-content: start;
        color: #007990;
        flex-direction: column;
    }
    
    .flex-text p {
      color: #545641;
      text-align: justify;
    }

＆＃13;

    <div class='flex-text'>
      <h3>Supercool heading <br />done nicely</h3>
      <p>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.</p>
    </div>

＆＃13;

Answer 1

您可以使用CSS表格执行此操作，只需在父元素上设置display: table并将宽度设置为1%或小的值，然后在标题上使用white-space: nowrap。

这种方式标题将保留在一行和断行中，您使用br标记，在这种情况下，文本将与最宽的元素或标题具有相同的宽度。

＆＃13;

div {
  text-align: center;
  border: 1px solid black;
  display: table;
  margin: 0 auto;
  width: 1%;
}
h1 {
  white-space: nowrap;
}

＆＃13;

<div>
  <h1>Lorem ipsum dolor sit amet <br> consectetur.</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci fugit minus, ad dicta ullam odio temporibus optio voluptatibus nisi, voluptatum molestias at. Molestiae maiores molestias ducimus praesentium vero, iusto laboriosam.</p>
</div>

＆＃13;

Answer 2

正如评论中所建议的那样，您只需使用包围标题和内容的包装器并为该包装器提供max-width

即可。

这个最大宽度将等于你的标题。这应该适用于您的情况，因为标题已经手动设置。

.flex-text {
        align-items: center;
        display: flex;
        justify-content: start;
        color: #007990;
        flex-direction: column;
    }

    .item {
      max-width: 153px;
    }
    
    .flex-text p {
      color: #545641;
      text-align: justify;
    }

    <div class='flex-text'>
      <h3 class="item">Supercool heading <br />done nicely</h3>
      <p class="item">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.</p>
    </div>

Answer 3

使用此代码

.flex-text{
  max-width:270px;
  margin:0 auto;
}
.flex-text h3{
  text-align:center;
  color: #545641;
  font-size:32px;
  line-height:100%;
}
.flex-text p{
  text-align:justify;
}

<div class='flex-text'>
  <h3>Supercool heading done nicely</h3>
  <p>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.</p>
</div>

使文本宽度与标题宽度相匹配

3 个答案: