Question

我在div中有一个跨度，div必须保持200px宽，文本必须适合div中的一行。范围内的文本是动态生成的，因此我无法知道哪些内容会中断到新行，哪些内容不会。

＆＃13;

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

＆＃13;

如果我使用CSS属性white-space:nowrap;，那么这些词会泄漏到div的外部，当然，我们也不想要。

如果换行是否会减少字体大小（或缩放）？我更喜欢CSS答案，但我理解这是否超出了CSS的能力。

Answer 1

一种相当讨厌的方法：循环减少溢出的跨度，直到它小于div宽度;

＆＃13;

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

＆＃13;

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

Answer 2

我建议阅读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/

Answer 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>

Answer 4

一个非常具体的案例 - 如果你有固定的div大小并且正在使用Angular.js：

定义一个函数，它将测试是否有一个将被包装的单词（因为你知道一行可以占用多少个字符）并返回一个字符串来指定一个字体较小的css类： / p>

$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类，该类将调用您定义的此函数，因此您的类＆＃34; long-word-title＆＃34;可以在需要的地方应用：
```
<div class="noselect sub-step-title {{longWordSubstepTitleResize(title)}}">
```
将较小文字的css规则添加到样式表

如何：如果换行符，请减小字体大小

4 个答案: