如何：如果换行符，减小字体大小 [英] How to: Reduce font-size if a line breaks

问题描述

我有一个跨度在div和div必须保持200px宽，文本必须适合div中的一行。

<预类=片段 - 代码HTML语言，HTML prettyprint-覆盖> < ; div style =width：200px> < / span>< / div>

如果我使用CSS属性 white-space：nowrap;

我如何减少字体大小（或缩放）基于如果换行还是不行？我更喜欢CSS答案，但我明白，如果这是在CSS的能力之外。

解决方案

溢出范围，直到其小于div宽度;

<预类=片段码 - JS郎JS prettyprint-覆盖> VAR divWidth = $（＃theDiv）宽（）; VAR文本= $（＃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的风格=宽度：200像素;边界：1px的红色实;> < / span>< / div>   

I have a span inside of a div and the div must remain 200px wide and the text must fit on one line within the div. The text within the span is dynamically generated so I can't possibly know which content will break to a new line and which will not.

<div style="width:200px">
  <span style="font-size:12px;">This sentence is too large to fit within the div.</span>
</div>

If I use the CSS property white-space:nowrap; the words will spill to the outside of the div, which of course, we don't want.

How would I reduce the font-size (or zoom) based on if the line breaks or not? I would prefer a CSS answer, but I understand if that is outside of CSS's abilities.

解决方案

One fairly nasty way, loop decreasing the overflowing span until its less that the div width;

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>

这篇关于如何：如果换行符，减小字体大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！