在单词之间的白色 space 上换行后更改字体大小
Change the font size after break line on white space between words
我在这个解决方案中找到了如何在单词之间的白色 space 上打断线的解决方案,这非常有帮助:
.test{
text-align:center;
}
h1{
word-spacing:9999px;
}
<div class="test">
<h1>split this</h1>
</div>
但是,css中换行后可以更改字体大小吗???下面的例子:
Example
如上建议。您可以创建 span 标签并使用伪 class nth-child 来设计所需的 span。
<div class="test">
<span class="text">split</span>
<span class="text">this</span>
</div>
.test {
text-align: center;
}
.test .text {
display: block;
font-size: 1rem;
}
.test .text:nth-child(2) {
font-size: 3rem
}
是的,您可以将第一行设为更大的尺寸:
.test {
text-align: center;
font-size:8px;
}
.test:first-line {
font-size:40px;
}
h1 {
word-spacing: 9999px;
}
<div class="test">
<h1>split this</h1>
</div>
这是另一个使用 word-spacing
创建换行符的技巧
.test {
width:min-content;
margin:auto;
text-align: center;
font-size:8px;
}
.test:first-line {
font-size:40px;
}
<div class="test">
<h1>split this</h1>
</div>
我在这个解决方案中找到了如何在单词之间的白色 space 上打断线的解决方案,这非常有帮助:
.test{
text-align:center;
}
h1{
word-spacing:9999px;
}
<div class="test">
<h1>split this</h1>
</div>
但是,css中换行后可以更改字体大小吗???下面的例子: Example
如上建议。您可以创建 span 标签并使用伪 class nth-child 来设计所需的 span。
<div class="test">
<span class="text">split</span>
<span class="text">this</span>
</div>
.test {
text-align: center;
}
.test .text {
display: block;
font-size: 1rem;
}
.test .text:nth-child(2) {
font-size: 3rem
}
是的,您可以将第一行设为更大的尺寸:
.test {
text-align: center;
font-size:8px;
}
.test:first-line {
font-size:40px;
}
h1 {
word-spacing: 9999px;
}
<div class="test">
<h1>split this</h1>
</div>
这是另一个使用 word-spacing
.test {
width:min-content;
margin:auto;
text-align: center;
font-size:8px;
}
.test:first-line {
font-size:40px;
}
<div class="test">
<h1>split this</h1>
</div>