如何让H1中的文本的字体大小只使用CSS就能动态填充H1的整个宽度?[duplicate]

zbdgwd5y  于 2023-02-01  发布在  其他
关注(0)|答案(1)|浏览(144)
    • 此问题在此处已有答案**:

(41个答案)
3天前关闭。
我有一个h1

<h1>Title Of Thing<h1>

h1的宽度为200px

h1{width:200px;}

虽然h1实际上是200px宽,但h1内部的文本并不适合整个宽度。
我希望能够使字体大小100%

h1{font-size:100%;}

当然,这只是使字体大小为默认值的100%,与h1容器无关。
我需要h1内部的字体大小来动态适应h1的宽度,因为有时候我想改变h1的宽度,这意味着h1的高度当然需要适应,这样文本就不会被剪切。
我很失望这不是H标签的默认行为。
有一种东西叫做适者生存,它所做的与我所需要的正好相反。

h1{width: fit-content;}

这会使h1缩小到其内部文本的大小,但我需要文本扩展到h1的大小。

wlsrxk51

wlsrxk511#

我的问题的答案是容器查询,下面的代码使h1中的文本缩放到h1的全宽。

h1{
container-type: inline-size;
font-size: 12cqw;
}

相关问题