如何：如果换行符减小字体大小答案

【问题标题】：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/cssref/css3_pr_text-overflow.asp
stackoverflow.com/questions/687998/…
它必须在一行上，这样才不会与@ShanRobertson 页面的设计相混淆。
所有文本都必须完全可见，因为这是@floribon 用户的关键信息。一个插件是不行的，页面加载的时间已经超过了我想要的时间，所以我不想再调用任何库了。

标签： javascript jquery html css

【解决方案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 解决方案将适应边缘情况。 stackoverflow.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 规则

【讨论】：