Question

我有一个标题：<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的情况下有可能吗？是否可以进行媒体查询？

Answer 1

您可以使用CSS variables并设置主标题宽度，如下所示：

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

使用p来使word-wrap: break-word;标签具有响应性

看一下这段代码：

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

将段落宽度限制为标题宽度

1 个答案: