适合div中的文本

Question

我需要在固定宽度容器中使用合适的文本，例如我有150px宽度，特别是div，但文本是动态的，所以基于一个字体大小更改并适合容器，请建议

注意： 只有javascript

Answer 1

您可以使用此方法，从此答案中窃取：

How to: Reduce font-size if a line breaks

AlexK撰写

＆＃13;

＆＃13;

var divWidth = $("#theDiv").width();
var text = $("#text");
var fontSize = 12;

while (text.width() > divWidth)
  text.css("font-size", fontSize -= 0.5);

text.css("display", "inline");

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="theDiv" style="width:200px; border:1px solid red;">
  <span id="text" style="display:none;white-space:nowrap;">This sentence is too large to fit within the div.</span>
</div>

＆＃13;

＆＃13;

＆＃13;

请注意，您需要JQuery。

如果你不想使用jQuery，用JS替换它应该不难。

JSFiddle