使宽度文本匹配标题宽度

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

我该如何纯粹使用CSS？

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

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

来源

2017-08-24 Hedge

把它放在一个'div'并给予'div'然后'MAX-width'放那里有文字。 – Sand

最简单的方法可能是将两者都放在同一个容器中（'div'或任何你喜欢的），并给这个容器固定的宽度。虽然不是真正的动态解决方案。不过，我不确定你想要做什么只需要CSS。 – domsson

我稍微改变了问题，并尝试创建一个堆栈片段。 – Hedge

你可以做到这一点使用CSS表格，您只需要设置父元素display: table，并设置宽度1%或小东西，然后在标题使用white-space: nowrap。

这种方式标题将停留在一条线上，并且您使用的是断线br标记和文本在此情况下与最宽的元素或标题具有相同的宽度。

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

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

来源

2017-08-24 10:56:38

不错！我从来没有碰过“display：table”，所以我不知道这是可能的。用类似的方法，比如说'inline-block'还是flex？ – domsson

这确实很好。浏览器支持也约为97％！ – Hedge

至于建议中的注释，你可以简单地围绕标题和内容，并给予该包装一个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>

来源

2017-08-24 10:59:23 Johannes

该方法不考虑通过'
'的手动换行。我在原始文章中添加了一个Stack代码片段。 – Hedge

其实这正是它工作的原因，因为你正在手动控制你正在控制宽度的中断，因此你可以设置它。我会尽快更新我的答案。 – Johannes

使用此代码

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

来源

2017-08-24 11:04:16

当'max-width'设置为较高值（例如600px）时，此方法不再适用。文字太宽了。 – Hedge

使宽度文本匹配标题宽度

回答

相关问题