如何解决将段落宽度限制为标题宽度
我有一个标题:<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的情况下有可能吗?是否可以进行媒体查询?
解决方法
您可以使用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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。