将段落宽度限制为标题宽度[重复]答案

【问题标题】：Limit paragraph width to header width [duplicate]将段落宽度限制为标题宽度[重复]
【发布时间】：2020-08-24 00:54:09
【问题描述】：

我有一个标题：<h1>Unknown width</h>

我在标题下还有一个段落：<p>Lorem ipsum dolor sit amet</p>

我正在尝试将段落的宽度限制为标题的宽度。当屏幕尺寸改变时，标题可能会换行，占据两行或多行。在这种情况下，我希望将段落限制为最长行的宽度。

我想要一些功能上等同于这个虚构 CSS 的东西：

#header {
    // header style
}

.paragraph {
    max-width: header.width;
    text-align: justify;
}

或者这个：

.container {
    width: fit-content except paragraph;
}

.header {
    // header style
}

.paragraph {
    width: 100%;
    text-align: justify;
}

不使用 JavaScript 是否可行？是否有可能有/没有媒体查询？

【问题讨论】：

能用Javascript/HTML/CSS sn-p函数做个例子吗？我很难想象你的场景。默认情况下，段落和文本都会自动换行以适合它们的框 - 即使该框受窗口大小的限制。您是否以其他方式设置文本框的宽度？
您需要将标题和段落都包装在一个 div 中，并将样式从标题移动到该父 div。

标签： css less

【解决方案1】：

您可以使用CSS variables 并像这样设置主标题宽度：

:root {
 --header-width: 50%;
}

并使用word-wrap: break-word; 使p 标记响应

看看这段代码：

:root {
  --header-width: 50%;
}

#header {
    width :  var( --header-width);
    border : 1px solid black;
}

.paragraph {
    word-wrap: break-word;
    max-width :  var( --header-width);
    border : 1px solid black;
}

<h1 id="header">Unknown width</h1>
<p class="paragraph">Lorem ipsum dolor sit amet asfasfasfasfasfsafassafsafasfasfasfsafasfsafasfasfasfasfasfasfasfasfasfasfasfasfasfasfasfasfasfasfasfasfsafasfasfasfasfasfasasfasfasfas</p>

【讨论】：

我不想将页眉的宽度设置为 50%。我只希望它的宽度适合标题中的文本。我根本不想为它指定宽度。 sn-p 显示一个 50% 宽度的标题（比它需要的更宽）和一个 50% 宽度的段落。这回答了我的问题：stackoverflow.com/questions/55040250/…