如何：如果换行符减小字体大小
Posted
技术标签:
【中文标题】如何：如果换行符减小字体大小【英文标题】：How to: Reduce font-size if a line breaks 【发布时间】：2015-04-13 15:41:38 【问题描述】：我在 div 内有一个 span，div 必须保持 200px 宽，并且文本必须适合 div 内的一行。跨度内的文本是动态生成的，所以我不可能知道哪些内容会换行，哪些不会。
<div style="width:200px">
<span style="font-size:12px;">This sentence is too large to fit within the div.</span>
</div>如果我使用 CSS 属性 white-space:nowrap;，字会溢出到 div 的外部，这当然是我们不希望的。
如何根据是否换行来减小字体大小（或缩放）？我更喜欢 CSS 答案，但我知道这是否超出了 CSS 的能力。
【问题讨论】：
想把它全部放在一条线上的原因是什么？ 您可能想查看第三方库，例如 fittext fittextjs.com。作为替代方案，您可以使用overflow: hidden; text-overflow: ellipsis 强制文本有省略号并且不会溢出到 div w3schools.com/cs-s-ref/css3_pr_text-overflow.asp
***.com/questions/687998/…
它必须在一行上，这样才不会与@ShanRobertson 页面的设计相混淆。
所有文本都必须完全可见，因为这是@floribon 用户的关键信息。一个插件是不行的，页面加载的时间已经超过了我想要的时间，所以我不想再调用任何库了。
【参考方案1】：
我建议阅读 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
http://css-tricks.com/viewport-sized-typography/
【讨论】：
但这与视口有关，而不是特定元素。不确定它是否是预期的 OP 是的，但这是唯一动态调整大小的 CSS 单元。如果他设置了一个静态视口宽度，他可能能够解释大部分内容可能性。 JS 解决方案将适应边缘情况。 ***.com/questions/14431411/… 这个网站是响应式的，它需要尽可能向后兼容。【参考方案2】：一种相当讨厌的方法：循环减少溢出的跨度，直到它小于 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>【讨论】：
【参考方案3】：试试这个并添加文本以查看结果
<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>
【讨论】：
【参考方案4】：一个非常具体的案例——如果你有固定的 div 大小并且正在使用 Angular.js：
定义一个函数来测试是否有一个单词会被换行（因为你知道一行可以占用多少个字符）并返回一个字符串来指定一个字体较小的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 类，这样您的类“long-word-title”就可以在需要的地方应用：
<div class="noselect sub-step-title longWordSubstepTitleResize(title)">
为您的样式表添加较小文本的 css 规则
【讨论】：
以上是关于如何：如果换行符减小字体大小的主要内容，如果未能解决你的问题，请参考以下文章