Как уменьшить размер шрифта, если строка прерывается

У меня есть span внутри 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>

Ответ 1

Один довольно неприятный способ, цикл, уменьшающий переполняющий диапазон, пока его меньше, чем ширина 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>

Ответ 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/

Ответ 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 для меньшего текста в таблицу стилей