javascript 如何：在换行时减小字体大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28485351/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to: Reduce font-size if a line breaks
提问by ExcellentSP
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 内有一个跨度，div 必须保持 200px 宽，文本必须适合 div 内的一行。跨度内的文本是动态生成的，所以我不可能知道哪些内容会换行，哪些不会。
<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.
如果我使用 CSS 属性white-space:nowrap;，单词将溢出到 div 的外部，这当然是我们不想要的。
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.
如果换行，我将如何减小字体大小（或缩放）？我更喜欢 CSS 答案，但我理解这是否超出了 CSS 的能力。
采纳答案by Alex K.
One fairly nasty way: loop decreasing the overflowing span until its less that the div width;
一种相当讨厌的方法：循环减少溢出的跨度，直到它小于 div 宽度；
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>回答by hopkins-matt
I would suggest reading up on CSS viewport units. That is probably as close to a good solution as you'll find in pure CSS.
我建议阅读 CSS 视口单位。这可能是您在纯 CSS 中找到的一个很好的解决方案。
1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger
回答by Tahmasb
try this and add text to see the result
试试这个并添加文本以查看结果
<HTML>
<HEAD>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var count = $("span").text().length;
var y = 1000/count ;
$('span').css('font-size',y);
});
</script>
</HEAD>
<BODY>
<div style="width:200px; border:1px solid black;">
<span style="font-size:12px;">This sentence is too large to fit within the div</span>
</div>
回答by Michael Discenza
A very specific case- if you have fixed div size and are using Angular.js:
一个非常具体的案例——如果你有固定的 div 大小并且正在使用 Angular.js：
define a function that will test if there is a word that will be wrapped (because you know how many characters a line can take) and return a string to specify a css class that has a smaller font size:
$scope.longWordSubstepTitleResize = function(title){ var longestWord = title.split(' ').reduce(function(longest, currentWord) { return currentWord.length > longest.length ? currentWord : longest; }, ""); if (longestWord.length>13){ return "long-word-title"; }else{ return; } }In your template, add a css class that will call this function you defined and so your class, "long-word-title", can be applied where needed:
<div class="noselect sub-step-title {{longWordSubstepTitleResize(title)}}">Add css rule for smaller text to your stylesheet
定义一个函数来测试是否有一个单词将被换行（因为你知道一行可以包含多少个字符）并返回一个字符串来指定一个具有较小字体大小的 css 类：
$scope.longWordSubstepTitleResize = function(title){ var longestWord = title.split(' ').reduce(function(longest, currentWord) { return currentWord.length > longest.length ? currentWord : longest; }, ""); if (longestWord.length>13){ return "long-word-title"; }else{ return; } }在您的模板中，添加一个 css 类，该类将调用您定义的此函数，因此您的类“长字标题”可以在需要的地方应用：
<div class="noselect sub-step-title {{longWordSubstepTitleResize(title)}}">将较小文本的 css 规则添加到样式表
