适合div中的文本

时间:2017-06-16 13:33:23

标签: javascript html

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

注意: 只有javascript

1 个答案:

答案 0 :(得分:0)

您可以使用此方法,从此答案中窃取:

How to: Reduce font-size if a line breaks

AlexK撰写



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");

<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