调整浏览器大小时，在div中调整文本

Question

在调整bowser窗口大小的同时，是否可以在div中创建文本以适合其DIV？

我阅读了this和this以及其他一些关于Fit Text to DIV的内容，但是当调整浏览器窗口大小时，它们都没有给出关于适合文本的接受答案。

<div id="wrapper">
    <div class= "tfz">FIT THIS TEXT</div>
</div>

jsFiddle

Answer 1

尝试 -

word-wrap: break-word;

并将宽度设置为%。希望能解决这个问题。

示例

<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

<强>风格

div {
    width: 500px;
    word-wrap: break-word;
    font-size: 2vw;
}

Check it here

Answer 2

width为px，除非您使用javascript/jquery，否则无法调整大小。因此，如果您在px中提及宽度非常重要，那么您可以通过jquery/javascript实现宽度。

因此，如果您同意在%中提及它，那么您肯定可以通过CSS管理它，如下所示：

#wrapper{
    position: relative;//no need to change this
    width: 50%;
    word-wrap: break-word;//apply this.
    height: auto;
}

<强> DEMO