调整浏览器大小时将文本放入 div答案

【问题标题】：Fit text inside div when borswer is resized调整浏览器大小时将文本放入 div
【发布时间】：2015-06-28 01:15:27
【问题描述】：

是否可以在调整 Bowser 窗口大小时使 div 内的文本适合其 DIV？

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

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

jsFiddle

【问题讨论】：

标签： javascript jquery css

【解决方案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

【讨论】：

word-wrap: break-word; 没有调整字体大小以适应其容器？我正在寻找一种通过调整字体大小来将文本修复到其 div 的方法。

【解决方案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

【讨论】：

但字体大小保持不变？通过调整字体大小实际上不适合 div？
为此，您需要使用一些javascript/jquery，这只是一些简单的代码行，您可以找到它HERE