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