Html 是否可以使用 CSS 将字体大小调整为 div 宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38089649/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to adapt font size to div width with CSS?
提问by Engkus Kusnadi
I have a div with 70%width, and here's what I want to do:
我有一个70%宽度的 div ，这是我想要做的：
- Put some words in that div
- Adapt font size so that those words occupy all div width
- 在那个div里放一些词
- 调整字体大小，使这些单词占据所有 div 宽度
Is this possible with only css? Here is my code:
这可能只用 css 吗？这是我的代码：
.parent {
width:70%;
height:auto;
min-height:100px;
background:red;
font-size:10vw;
}Please help me to change the font-size dynamically to the parent class
<hr>
<div class="parent">
This Text
</div>Note: the div size is responsive, this is important. Thanks in advance!
注意：div大小是响应式的，这很重要。提前致谢！
回答by Anthony Astige
Perhaps not quite what you're looking for, but something - You can make both the font and the element relative to view width.
也许不是你正在寻找的东西，但有些东西 - 你可以相对于视图宽度制作字体和元素。
p {
font-size: 5vw;
background-color: red;
width: 50vw;
}<p>
I'm a P!
</p>回答by Marina
You just have to add display: inline;in your code
你只需要添加display: inline;你的代码
.parent {
width: 70%;
height: auto;
min-height: 100px;
background: red;
font-size: 10vw;
display: inline;
}<div class="parent">
This Text
</div>回答by Saw Saw
**You can change font-size:10vh;**
.parent {
width:70%;
height:auto;
min-height:100px;
background:red;
color:white;
font-size:10vh;
}
Please help me to change the font-size dynamically to the parent class
<hr>
<div class="parent">
Text
</div>
回答by shivani
Here, I Updated it.... JS Fiddel
在这里，我更新了它.... JS Fiddel
try to use
尝试使用
css
css
.parent
{
width:70%;
height:auto;
min-height:100px;
background:red;
font-size:10vw;
}
span{
display:inline-block;
transform:scale(1.8,1);
-webkit-transform:scale(3,1);
}
HTML
HTML
<div class="parent">
<span>This Text</span>
</div>
回答by Felix Fong
Yes but I think you need to use JS(jQuery).
是的，但我认为您需要使用 JS(jQuery)。
JS:
JS：
$(function(){
var box = $('.box');
var boxWith = box.width();
$('.box h1').css('font-size',boxWith);
});
