Мне нужно отобразить введенный пользователем текст в div с фиксированным размером. Я хочу, чтобы размер шрифта был автоматически отрегулирован так, чтобы текст заполнил поле как можно больше.
Я бы, вероятно, хотел бы начать с максимального размера шрифта, и, хотя текст слишком велик, чтобы соответствовать контейнеру, уменьшите размер шрифта, пока он не подходит, и шрифт должен отображаться как одна строка. Можно ли это сделать, используя только css и html.
Скажите, что у вас есть это:
<div id="outer" style="width:200px; height:20px; border:1px solid red;">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mollis dui felis, vel vehicula tortor cursus nec</div>
</div>
Затем вы можете сделать что-то вроде:
$(document).ready(function () {
resize_to_fit();
});
function resize_to_fit(){
var fontsize = $('div#outer div').css('font-size');
$('div#outer div').css('fontSize', parseFloat(fontsize) - 1);
if($('div#outer div').height() >= $('div#outer').height()){
resize_to_fit();
}
}
Рабочий пример
$(document).ready(function() {
resize_to_fit();
});
function resize_to_fit() {
var fontsize = $('div#outer div').css('font-size');
$('div#outer div').css('fontSize', parseFloat(fontsize) - 1);
if ($('div#outer div').height() >= $('div#outer').height()) {
resize_to_fit();
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outer" style="width:200px; height:20px; border:1px solid red;">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mollis dui felis, vel vehicula tortor cursus nec</div>
</div>Получение размера в пикселях строки текста является трудным делом и сильно зависит от браузера и пользовательских настроек, поэтому, вероятно, будет сложно найти решение, которое работает во всех случаях.
Под "отображаемым пользователем введенным текстом" вы подразумеваете, что пользователь вводит текстовое поле? Если это так, вы можете подключить прослушиватель нажатия клавиш, который проверяет длину значения текста, а затем соответственно корректирует font-size. Вот пример, хотя вам, вероятно, потребуется изменить длину и размер шрифта в соответствии с вашими потребностями:
Рабочий демонстрационный пример
$('#text').on('keypress', function(e) {
var that = $(this),
textLength = that.val().length
;
if(textLength > 30) {
that.css('font-size', '5px');
} else if(textLength > 20) {
that.css('font-size', '10px');
} else if(textLength > 10) {
that.css('font-size', '15px');
}
});
Если по длине текста вы подразумеваете количество символов, есть эта статья, которая указывает на короткий фрагмент jquery Изменение размера шрифта динамически на основе количества символов
$('.text').each(function(){
var el= $(this);
var textLength = el.html().length;
if (textLength > 20) {
el.css('font-size', '0.8em');
}
});
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1{
width: 200px;
height: 200px;
font-size: 32px;
line-height: 1.2em;
}
</style>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script>
$(function(){
n = 1;
while(n==1){
n = 0
if ($('#div1 .holder').outerHeight()>$('#div1').outerHeight()){
var fz = parseInt($('#div1').css('font-size'));
$('#div1').css({'font-size' : fz-1});
n = 1
} else {n = 0}
}
});
</script>
</head>
<body>
<div id="div1">
<div class="holder">I need to display user entered text into a fixed size div. What i want is for the font size to be automatically adjusted so that the text fills the box as much as possible.
I'd probably want to start with a maximum font size and while the text is too big to fit the container, shrink the font size until it fits and the font must be displayed as a single line. Is it possible to do this using only css and html.</div>
</div>
</body>
</html>
Кому нужна динамическая функция, которая зависит от ширины элемента (на основе ответа putvande):
$(document).ready(function () {
var arrEl = ['div1', 'div2', 'div3'];
resize_to_fit(arrEl);
});
function resize_to_fit(arr){
for (var el in arr) {
var jEl = $('.' + arr[el] + ' span');
var fontsize = jEl.css('font-size');
jEl.css('fontSize', parseFloat(fontsize) - 1);
if (jEl.width() >= $('.' + arr[el]).width()){
resize_to_fit([arr[el]]);
}
}
}
и HTML:
<div class="div1">
<span>Lorem Ipsum</span>
</div>
<br/>
<div class="div2">
<span>Lorem Ipsum 2</span>
</div>
<br />
<div class="div3">
<span>Lorem Ipsum 3</span>
</div>
с CSS:
.div1, .div2, .div3 {
width: 207px;
white-space: nowrap;
}
Обратите внимание, что вы устанавливаете только размер шрифта внутри, а не внешний div.
Спасибо putvande за то, что он дал мне знать общий метод. Вот улучшенная версия.
Тот же HTML:
<div id="outer" style="width:200px; height:20px; border:1px solid red;">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mollis dui felis, vel vehicula tortor cursus nec</div>
</div>
Вот функция:
resize_to_fit($('#outer'), $('#outer div'));
function resize_to_fit(outer, inner) {
while(inner.height() > outer.height()) {
var fontsize = parseInt(inner.css('font-size')) - 1;
inner.css('font-size', fontsize);
// some browsers(chrome) the min font return value is 12px
if(fontsize <= 1 || parseInt(inner.css('font-size')) >= fontsize+1)
break;
}
}
Используя очень маленький Javascript, вы можете назначить CSS-класс с длиной строки, например: text-length-5 или text-length-20
Затем используйте исключительно CSS для определения font-size соответствии с именами классов.
Это, вероятно, не будет работать для каждого случая, но это очень хорошо для моего, где максимальная длина была около 10-12 символов.
Если у вас есть символы 100+ или 1000+, вы также можете создать функцию, которая получает длину и возвращает класс CSS, а затем основывает стиль на этих диапазонах.
HTML:
<div class="box">ABC</div>
<div class="box">ABCDE</div>
Javascript (jQuery, но ту же идею можно применить к React или vanilla JS)
$(".box").each((i, el)=> {
const length = $(el).text().length;
$(el).addClass("text-length-"+length);
})
CSS:
.box {
font-size: 16px;
}
.box.text-length-4,
.box.text-length-5,
.box.text-length-6 {
font-size: 12px;
}