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

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

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

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

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

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

Хром зависнет, войдя в бесконечный цикл. К сожалению, у меня по странной причине не работает 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);
	});
});

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

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

Ленивая загрузка изображений проблема с предварительным отображением изображений?

Давайте проясним ситуацию. Есть HTML, передаваемый по протоколу http. Браузер его принимает и начинает обработку с помощью встроенного парсера. Результатом обработки однозначно является DOM — структура получившегося документа.

Если в результате обработки парсер выявляет внешние ссылки, то должна последовать реакция. К примеру, если эти ссылки являются атрибутами элементов «link», то браузер автоматически начинает загрузку внешних файлов. А если встречается «script» с атрибутом src и без атрибута async (defer), то работа самого парсера приостанавливается до окончания разбора скрипта (неважно, успешной или нет).

Вопрос — а как поступает браузер с элементами типа «img»? Загружает сразу или ждёт построения DOM? Мне кажется, сразу. И, если я прав, то вы не сможете предотвратить старт загрузки изображений.

Почему после анимирования получается неточный результат?

Извините, но код ваш страшен

Как правильно использовать transform(translateX):hover?

@onahapa да, по рукам не надо, вы правы. Руки ещё пригодятся. Лучше на кол. А бить надо по многим причинам:

— нагружает браузер понапрасну
— для шрифта убивает наследование
— затрудняет применение сторонних плагинов, модулей

Имитация очень профессионального карандашного рисунка. Как достичь такого результата?

Я бы сказал, что это вообще не рисунки, а я заканчивал художественную школу. Настоящий шик — наброски, эскизы, офорты, гравюры как наших отечественных рисовальщиков, так и признанных мастеров — да Винчи, Дюрера.

А то, что приведено как пример, просто мазня.

Почему форма не работает из выезжающего окна?

А я думал — только у меня возникло недоумение... Ан нет, точно не показалось:)

Как правильно использовать transform(translateX):hover?

@onahapa вы взяли мой пример и спрашиваете, почему у вас не работало?))) Объясню ещё раз: у вас большая картинка была с position:absolute, а у меня она в нормальном потоке. Поэтому в моём примере высота общего контейнера определяется высотой большой картинки, а у вас она не влияла на контейнер никак. Ясно?

Почистили, говорите?)) Вот за такое надо руки рубить:

* {
    font-family: sans-serif;
    margin: 0;
    padding: 0;   
}

Как правильно использовать transform(translateX):hover?

@onahapa работало бы только для области блока .music.

В вашем примере не хватает оформления блока .music и блока .music-button с маленькими картинками. Без этих пропущенных стилей высота:

.music = .music-button ~110 пикселей
.music-image 0 пикселей
.music-image img 200 пикселей

Это значит, что на нижней части большой картинки (примерно 90 оставшихся пикселей) вы наблюдали бы точно такой же эффект дёргания.

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

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

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

Как правильно использовать transform(translateX):hover?

Если серьёзно, то у вас высота блока div.music-image была 0. Наведение срабатывало на картинке. И как только картинка уезжала из-под курсора, псевдокласс :hover слетал с этого блока. Картинка ехала назад. И так по кругу.

Как правильно использовать transform(translateX):hover?

Я делаю уличную магию. Особую. Хотите увидеть немного магии?

Как отправлять текст в верх страницы с текстового поля внизу страницы?

@DOC1e421 Без JS вы не сможете модифицировать DOM.

CSS может работать только с тем, что уже есть. Максимум — можно в псевдообластях при появлении псевдоклассов контент динамически переписать, но и это должно быть на момент начала использования стиля.

Так что вставить произвольный текст куда-то в DOM может только JS.

Как создать географическую карту наподобие 2gis?

Вот об этом и речь:)

Как обратиться к data-параметру jQuery?

Как jQuery может быть нативным?)

Как заглушить javascript исключения в iframe?

Господи, вот я лошара — правильно было написать «инъекция». Или я опять пальцем в небо?)

Как получить ссылку на переменную из другого метода?

Может, автор имеет ввиду что-то типа организации «приватной» переменной:

var x = new F();
function F () {
	var inner = 3;
	return {
		a: function () {
			inner++;
		},
		b: function () {
			console.log(inner);
		}
	};
}
x.a();
x.b();

Правда, тут тоже передавать ничего не нужно...

Почему alert выдаёт undefined после post запроса к PHP?

И ещё, скажите пожалуйста, вы понимаете разницу между ссылкой на функцию и возвратом значения из функции?