Как уменьшать и адаптировать текст, когда он не помещается в блок?

Question

[spike364]

Есть блок. Он заполняется текстом при определенных событиях. Но при большом объеме текста, он выходит за границу и заслоняет блок, который рядом.
Как сделать текст адаптивным? Чтобы его размер уменьшался при переполнении div'а?

Comments

[Юрий Лобанов]

Автор, куда пропали?

Answer 1

[Григорий Жданов]

Думаю вам подойдет использование vh. Например:

.some-text {
    font-size: 100vh;
    line-height: 100vh;
}

Вот статья на хабре

Comments

[spike364]

Тогда весь текст будет адаптивным в зависимости от размеров окна, а не блока

Answer 2

[Юрий Лобанов]

Пример:
codepen.io/iiil/pen/yDbtL

При добавлении текста вызывайте функцию scale. Переменные step и minfs — это шаг изменения размера шрифта и минимальный размер шрифта. При достижении минимума, появляется вертикальный скролл.

Comments

[Евгений Петров]

Хром зависнет, войдя в бесконечный цикл. К сожалению, у меня по странной причине не работает jsfiddle.net, приведу код прямо тут:

<style>
#d{
	padding:10px;
	width:400px;
	height:300px;
	overflow:auto;
	font-size:20px;
}
a{
	color:#fff;
}
</style>
<script>
$(function(){
	var div = $('#d'),
		fontsize = parseInt(div.css('font-size')),
		step = 0.1,
		minfs = 9;

	function scale(block) {
		if (block.get(0).scrollHeight > block.get(0).clientHeight) {
			fontsize -= step;
			if (fontsize >= minfs){
				console.log(fontsize);
				block.css({
					'font-size': fontsize
				});
				scale(block);
			}
		}
	}

	$('a').click(function(e){
		e.preventDefault();
		div.html(div.html() + div.html());
		scale(div);
	});
});

[Юрий Лобанов]

@Petroveg да, я как обычно в ff только смотрю. Я понимаю, почему работает Ваш вариант, но не понимаю, почему не работает в chrome мой. Не просветите?

[Евгений Петров]

А вот и шайтан-арба приехаль:)
codepen.io/cleric/pen/kidHf

[Евгений Петров]

@iiil аналогично — я смотрю в FF изначально. Полагаю, причина в том, что font-size не изменяется. Понятия не имею, почему хром тупит... Наверное, всё время на Dart уходит...

И пора уже стать друзьями на этом островке порядка в смутные времена:)

[Юрий Лобанов]

@Petroveg ну я подумаю на досуге что и где делаю не так. А может и не буду, главное ведь идея — отслеживать появление скролла, а к реализации автор похоже все равно потерял интерес )
Ок, буду на ты )

Answer 3

[barkalov]

function onTextChange() {
    var textLength = $('.textHolder').text().length;
    var fontSize = Math.min(12, (1000 / textLength) * 12); 
    //where 12 - typical font-size, 1000 - typical length
    $('.textHolder').css('font-size', fontSize+'px');
{

Это с jQuery. На ванильном js можете переписать сами.

Answer 4

[Евгений Петров]

Сдаётся мне, что задача некорректна с самого начала. Чем прокрутка не угодила?

Comments

[spike364]

Нужно именно, чтобы текст сжимался когда он намеревается из-за количества букв покинуть границы divа

[Евгений Петров]

Добавьте информации:)

Как именно изменяется текст?
Возможно ли появления большого куска текста?
Только ли текст находится в содержании блока?
Как сильно может изменяться содержание?

[Юрий Лобанов]

@spike364 @Petroveg посмотрите мой вариант.

[Andrey M.]

Это актуально при печати в шаблонах с строго заданной высотой строки. Сейчас такая же проблема возникла, хрен знает где искать решение

Answer 5

[Виталий Желтяков]

Такой вариант не подойдёт?
htmlbook.ru/css/text-overflow

Comments

[spike364]

К сожалению, нет. Нужно чтобы он именно уменьшался, но спасибо всеравно

Answer 6

[Лев Салатов]

Адаптивная верстка, как изменить размер шрифта при изменении размера блока ?

Comments

[Евгений Петров]

Читайте комментарии автора