Как сделать, чтобы текстовая область textarea не растягивалась

Textarea — это HTML-элемент, который используется для создания многострочного текстового поля. Однако, часто возникает проблема растягивания textarea при вводе большого количества текста. В этой статье мы рассмотрим несколько оптимальных способов предотвратить растяжение textarea и сделать его более удобным в использовании.

Первый способ предотвратить растяжение textarea — это задать ему фиксированную высоту и ширину с помощью CSS. Это позволит контролировать размер элемента и предотвратить его растяжение при вводе большого количества текста. Вы можете использовать свойство «height» для задания высоты и свойство «width» для задания ширины textarea.

Еще один способ предотвратить растяжение textarea — это использовать атрибуты «rows» и «cols». Атрибут «rows» позволяет задать количество строк текста, отображаемых в textarea, а атрибут «cols» — количество столбцов. Задав фиксированные значения для этих атрибутов, вы сможете контролировать размер textarea и предотвратить его растяжение.

Примечание: Если вы хотите, чтобы textarea подстраивался под количество вводимого текста, но не растягивался по ширине, вы можете использовать значение «auto» для свойства «height» или атрибута «rows».

И наконец, третий способ предотвратить растяжение textarea — это использовать JavaScript. Вы можете написать скрипт, который будет автоматически изменять высоту textarea в зависимости от количества вводимого текста. Для этого можно использовать свойство «scrollHeight» элемента textarea, которое возвращает высоту содержимого. При каждом изменении текста в textarea, скрипт будет пересчитывать высоту и изменять ее соответственно, предотвращая растяжение элемента.

Теперь вы знаете несколько оптимальных способов предотвратить растяжение textarea и сделать его более удобным в использовании. Выберите подходящий способ для вашего проекта и наслаждайтесь работой с textarea!

Растяжение textarea: оптимальные способы предотвращения

Растягивающийся текстовый блок (textarea) на веб-страницах может быть проблемой для пользователей, особенно если они вводят большое количество текста. Это может снижать удобство использования и может стать источником ошибок ввода данных. Однако, существуют несколько оптимальных способов предотвращения растяжения textarea.

1. Установка фиксированного размера:

• Установите явные значения ширины и высоты textarea с помощью CSS. Это ограничит размер блока и предотвратит его автоматическое растягивание.

2. Использование атрибутов rows и cols:

• Используйте атрибуты rows и cols в теге textarea для явного указания количества строк и столбцов.

3. Добавление вертикальной полосы прокрутки:

• Для предотвращения растяжения textarea можно добавить вертикальную полосу прокрутки, указав стиль overflow-y: scroll в CSS. Таким образом, пользователи будут иметь возможность прокручивать текст вместо его растягивания.

4. Разделение textarea на несколько блоков:

• Если textarea используется для ввода текста большого объема, можно подумать о разделении его на несколько блоков с использованием тегов. Это позволит пользователям видеть только часть текста, а не весь блок сразу.

5. Использование таблицы:

• Выравнивание textarea в таблице может помочь контролировать его размер. Установите ширину ячейки таблицы, содержащей textarea, и ограничьте растяжение блока.

Растяжение textarea может быть проблемой для пользователей, поэтому важно принять меры для предотвращения этой ситуации. Выбор оптимального способа зависит от потребностей вашего проекта и предпочтений пользователей.

Почему возникает проблема растяжения textarea

Проблема растяжения текстового поля textarea возникает из-за его особенностей и недостатков стандартных свойств CSS.

Когда пользователь вводит текст в textarea, она может расти по вертикали, чтобы вместить все введенные данные. Это может вызывать неудобства при визуальном оформлении пространства для ввода текста.

Основные причины возникновения проблемы растяжения textarea:

• Автоматическое увеличение высоты: В отличие от других элементов форм, textarea может автоматически растягиваться по вертикали, чтобы вместить весь введенный текст. Это может нарушить визуальное оформление страницы и сделать ее менее привлекательной.
• Неопределенность размеров: Текстовое поле textarea может не иметь разумного ограничения по вертикали или горизонтали, что может привести к его чрезмерному растягиванию и нарушению оформления страницы.
• Отсутствие контроля размеров: Стандартные свойства CSS для textarea ограничены и не позволяют полностью контролировать его размеры и поведение.

Все эти факторы могут приводить к проблемам с макетом и дизайном страницы при использовании textarea веб-форм и приложений.

Установите максимальное количество символов

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

Для установки максимального количества символов в textarea достаточно добавить атрибут maxlength со значением, равным желаемому ограничению. Например, <textarea maxlength="100"></textarea> ограничивает количество символов до 100.

Добавление такого ограничения полезно, когда требуется ограничить длину сообщений или комментариев, чтобы они вписывались в определенное пространство.

Кроме того, можно добавить информацию о количестве оставшихся символов для пользователя. Это можно сделать с помощью JavaScript, обновляя счетчик при каждом изменении текста в поле.

1. Создайте textarea: <textarea id=»myTextarea» maxlength=»100″></textarea>
2. Добавьте счетчик: <p>Осталось символов: <span id=»charCount»>100</span></p>
3. Напишите скрипт:

   const textarea = document.getElementById('myTextarea');
   
   const charCount = document.getElementById('charCount');
   textarea.addEventListener('input', function() {
   charCount.textContent = textarea.maxLength - textarea.value.length;
   });

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

Таким образом, установка максимального количества символов в textarea и добавление счетчика позволяет контролировать длину текста и предотвращает его растяжение, обеспечивая удобство использования и визуальную целостность интерфейса.

Используйте атрибут «wrap»

Атрибут «wrap» является одним из способов предотвращения растяжения элемента . Он позволяет определить, как текст должен переноситься внутри поля ввода.</p><p>Значение атрибута «wrap» может быть одним из трех:</p><ol><li><strong>soft</strong>: текст будет переноситься только при достижении конца строки, но не будет автоматически переноситься на новую строку;</li><li><strong>hard</strong>: текст будет автоматически переноситься на новую строку при достижении конца строки;</li><li><strong>off</strong>: текст будет отображаться как одна длинная строка, без переносов на новую строку.</li></ol><p>Например, чтобы использовать атрибут «wrap» со значением «hard», нужно добавить его в открывающий тег <textarea>:</p><p><pre></p> <p><code></p> <p><textarea wrap="hard"></textarea></p> <p></code></p> <p></pre></p><p>Таким образом, при вводе текста в это поле, текст будет автоматически переноситься на новую строку, когда достигнут конец текущей строки.</p><p>Атрибут «wrap» является простым и эффективным способом контролирования переноса текста внутри <textarea>. Он позволяет предотвратить растяжение элемента и обеспечить более удобное чтение и редактирование текста.</p><h2 id="ustanovite-fiksirovannuyu-vysotu">Установите фиксированную высоту</h2><p>Другой подход к предотвращению растяжения <code><textarea></code> заключается в установке фиксированной высоты элемента с помощью CSS.</p><p>Для этого можно использовать свойство <code>height</code> в CSS. Просто установите желаемое значение для высоты:</p><p><pre></p> <p><code></p> <p><textarea style="height: 200px;"></textarea></p> <p></code></p> <p></pre></p><p>Это означает, что высота <code><textarea></code> будет равна 200 пикселям.</p><p>Если у вас есть несколько <code><textarea></code> на странице и вы хотите, чтобы они имели одинаковую фиксированную высоту, вы можете применить стиль ко всем <code><textarea></code> элементам:</p><p><pre></p> <p><code></p> <p><style></p> <p>textarea {</p> <p>height: 200px;</p> <p>}</p> <p></style></p> <p></code></p> <p></pre></p><p>Теперь все <code><textarea></code> на странице будут иметь высоту 200 пикселей.</p><p>Однако, следует помнить, что фиксированная высота может стать проблемой, если введенный текст не помещается в предоставленное пространство. В этом случае, пользователь сможет прокручивать текст внутри <code><textarea></code>, чтобы прочитать или отредактировать скрытую часть.</p><h2 id="ispolzuyte-css-dlya-ogranicheniya-razmerov">Используйте CSS для ограничения размеров textarea</h2><p>Одним из наиболее эффективных способов предотвратить растяжение textarea является использование CSS для ограничения его размеров. Это может быть полезно, если вы хотите, чтобы textarea оставалась читаемой даже при большом количестве введенных данных.</p><p>Вы можете использовать следующие CSS свойства, чтобы ограничить размеры textarea:</p><ol><li><strong>width</strong>: определяет ширину textarea. Вы можете использовать конкретное значение (например, в пикселях или процентах), или использовать ключевые слова, такие как «auto» или «inherit». Например, вы можете установить ширину textarea равной 300 пикселям: <code>width: 300px;</code></li><li><strong>height</strong>: определяет высоту textarea. Аналогично свойству width, вы можете использовать конкретные значения или ключевые слова. Например, вы можете установить высоту textarea равной 200 пикселям: <code>height: 200px;</code></li><li><strong>max-width</strong>: задает максимальную ширину textarea. Это свойство может быть полезным в случае, если вы хотите иметь textarea, которая может растягиваться только до определенного предела. Например, вы можете установить максимальную ширину textarea равной 500 пикселям: <code>max-width: 500px;</code></li><li><strong>max-height</strong>: определяет максимальную высоту textarea. Это свойство аналогично свойству max-width и может быть использовано для ограничения роста textarea. Например, вы можете установить максимальную высоту textarea равной 400 пикселям: <code>max-height: 400px;</code></li></ol><p>Пример:</p><p><pre><code><textarea style="width: 300px; height: 200px; max-width: 500px; max-height: 400px;"></textarea></code></pre></p><p>В данном примере textarea будет иметь фиксированные размеры ширины 300 пикселей и высоты 200 пикселей, но она не сможет растягиваться более чем до 500 пикселей по ширине и 400 пикселей по высоте.</p><p>Используя CSS свойства для ограничения размеров textarea, вы можете контролировать его внешний вид и предотвратить его растяжение, обеспечивая при этом удобство использования для пользователей.</p><h2 id="ispolzuyte-javascript-dlya-validatsii-vvodimyh">Используйте JavaScript для валидации вводимых данных</h2><p>Для предотвращения растяжения textarea и обеспечения корректного ввода данных пользователем можно использовать JavaScript для валидации. Это позволяет контролировать, какие символы можно вводить и в каких количествах, что делает ввод более удобным и защищенным от ошибок.</p><p>Пример использования JavaScript:</p><ol><li>Создайте функцию, которая будет вызываться каждый раз при изменении содержимого поля textarea.</li><li>Внутри функции получите содержимое textarea с помощью свойства <code>value</code>.</li><li>Примените нужные проверки к полученному значению, например, можно проверить, что в поле введен только текст и не более определенного количества символов.</li><li>Если введенные данные не соответствуют требованиям, выведите сообщение об ошибке и предотвратите сохранение данных.</li></ol><p>Пример валидации с помощью JavaScript:</p><p><pre></p> <p><code></p> <p>function validateTextarea() {</p> <p>var textarea = document.getElementById('textarea');</p> <p>var value = textarea.value;</p> <p>if (value.length > 100) {</p> <p>alert('Максимальная длина текста 100 символов');</p> <p>textarea.value = value.slice(0, 100);</p> <p>}</p> <p>if (!/^[а-яА-Яa-zA-Z\s]+$/.test(value)) {</p> <p>alert('Поле должно содержать только буквы');</p> <p>textarea.value = '';</p> <p>}</p> <p>}</p> <p></code></p> <p></pre></p><p>В приведенном примере функция <code>validateTextarea</code> проверяет, что введенный текст не превышает 100 символов и содержит только буквы. Если условия не выполняются, выводится сообщение об ошибке и поле textarea очищается или обрезается до максимальной длины.</p><p>Для вызова этой функции каждый раз при изменении содержимого textarea можно использовать событие <code>oninput</code>:</p><p><pre></p> <p><code></p> <p><textarea id="textarea" oninput="validateTextarea()"></textarea></p> <p></code></p> <p></pre></p><p>Таким образом, использование JavaScript для валидации вводимых данных в textarea позволяет контролировать содержимое поля и предотвращать растяжение, обеспечивая правильный и защищенный ввод.</p><h2 id="ispolzuyte-plaginy-i-freymvorki-dlya-uproscheniya">Используйте плагины и фреймворки для упрощения работы с textarea</h2><p>Вам не обязательно писать код с нуля, чтобы предотвратить растяжение textarea вы можете использовать готовые плагины и фреймворки, которые упростят вашу работу и предоставят вам больше возможностей. Вот несколько популярных плагинов и фреймворков, которые вы можете использовать:</p><ol><li><strong>jQuery</strong>: это популярная JavaScript-библиотека, которая предоставляет множество полезных функций для работы с DOM-элементами. Вы можете использовать jQuery для управления размером и стилем textarea с помощью метода <code>.css()</code> или добавления классов с помощью метода <code>.addClass()</code>.</li><li><strong>Bootstrap</strong>: это популярный фреймворк, который предлагает множество компонентов для создания адаптивных и красивых веб-интерфейсов. В состав Bootstrap входит <code>textarea</code> компонент, который имеет встроенную функциональность для регулировки размера и стиля. Вы можете использовать классы и опции Bootstrap для достижения нужного результата.</li><li><strong>Autosize</strong>: это легковесный плагин jQuery для автоматического изменения размера textarea в зависимости от его содержимого. Он позволяет textarea растягиваться только настолько, насколько это необходимо, предотвращая его излишнее растяжение. Вы можете просто подключить плагин Autosize к вашему проекту и использовать его без необходимости вручную управлять размером textarea.</li></ol><p>При выборе плагина или фреймворка для работы с textarea учитывайте вашу собственную экспертизу и опыт. Используйте тот инструмент, который наиболее подходит для ваших потребностей и который вам наиболее понятен. Внимательно изучите документацию и примеры использования, чтобы оптимально использовать выбранный инструмент.</p><h2 id="vopros-otvet">Вопрос-ответ</h2><h3 id="kakie-problemy-voznikayut-pri-rastyazhenii">Какие проблемы возникают при растяжении textarea?</h3><blockquote class="question"><p>При растяжении textarea могут возникать проблемы с пользовательским интерфейсом, так как элемент может занимать слишком много места на экране, а также с отображением введенного текста, который может не помещаться в рамках textarea.</p></blockquote><h3 id="kakie-sposoby-predotvrascheniya-rastyazheniya">Какие способы предотвращения растяжения textarea существуют?</h3><blockquote class="question"><p>Существуют различные способы предотвращения растяжения textarea, включая ограничение максимального размера элемента, использование скроллбаров для прокрутки текста, а также использование адаптивного поведения textarea в зависимости от размера экрана.</p></blockquote><h3 id="kak-mozhno-ogranichit-maksimalnyy-razmer">Как можно ограничить максимальный размер textarea?</h3><blockquote class="question"><p>Для ограничения максимального размера textarea можно использовать свойство CSS «max-height». Например, можно задать значение «300px», чтобы textarea не расширялся более этого значения.</p></blockquote><h3 id="mozhno-li-ispolzovat-skrollbary-dlya-prokrutki">Можно ли использовать скроллбары для прокрутки текста в textarea?</h3><blockquote class="question"><p>Да, можно использовать скроллбары для прокрутки текста в textarea. Для этого нужно задать свойство CSS «overflow» со значением «auto» или «scroll». Таким образом, если текст не помещается в textarea, будет добавлен скроллбар, который позволит прокручивать текст.</p></blockquote><h3 id="mozhno-li-adaptirovat-povedenie-textarea">Можно ли адаптировать поведение textarea в зависимости от размера экрана?</h3><blockquote class="question"><p>Да, можно адаптировать поведение textarea в зависимости от размера экрана, используя CSS media queries. Например, можно задать разные значения для свойства «max-height» в зависимости от ширины экрана, чтобы textarea не растягивался слишком сильно на маленьких устройствах.</p></blockquote><h3 id="kak-vybrat-optimalnyy-sposob-predotvrascheniya">Как выбрать оптимальный способ предотвращения растяжения textarea?</h3><blockquote class="question"><p>Оптимальный способ предотвращения растяжения textarea зависит от конкретного случая использования. Если важно сохранить определенное количество видимых строк текста, то можно ограничить максимальный размер textarea. Если важно позволить пользователю ввести большой объем текста, то можно использовать скроллбары для прокрутки. Важно также учесть адаптивность, чтобы textarea хорошо смотрелась на разных устройствах.</p></blockquote><div class="fpm_end"></div></div></article><div class="rating-box"><div class="rating-box__header">Оцените статью</div><div class="wp-star-rating js-star-rating star-rating--score-0" data-post-id="29292" data-rating-count="0" data-rating-sum="0" data-rating-value="0"><span class="star-rating-item js-star-rating-item" data-score="1"><svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="i-ico"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z" class="ico-star"></path></svg></span><span class="star-rating-item js-star-rating-item" data-score="2"><svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="i-ico"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z" class="ico-star"></path></svg></span><span class="star-rating-item js-star-rating-item" data-score="3"><svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="i-ico"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z" class="ico-star"></path></svg></span><span class="star-rating-item js-star-rating-item" data-score="4"><svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="i-ico"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z" class="ico-star"></path></svg></span><span class="star-rating-item js-star-rating-item" data-score="5"><svg aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" class="i-ico"><path fill="currentColor" d="M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z" class="ico-star"></path></svg></span></div></div><div class="entry-social"><div class="social-buttons"><span class="social-button social-button--vkontakte" data-social="vkontakte" data-image=""></span><span class="social-button social-button--telegram" data-social="telegram"></span><span class="social-button social-button--odnoklassniki" data-social="odnoklassniki"></span><span class="social-button social-button--twitter" data-social="twitter"></span><span class="social-button social-button--sms" data-social="sms"></span><span class="social-button social-button--whatsapp" data-social="whatsapp"></span><span class="social-button social-button--pinterest" data-social="pinterest" data-url="https://uchet-jkh.ru/i/kak-sdelat-ctoby-tekstovaya-oblast-textarea-ne-rastyagivalas/" data-title="Как сделать, чтобы текстовая область textarea не растягивалась" data-description="Textarea — это HTML-элемент, который используется для создания многострочного текстового поля. Однако, часто возникает проблема растягивания textarea при вводе большого количества текста. В этой статье мы рассмотрим несколько оптимальных способов предотвратить растяжение textarea и сделать его более удобным в использовании. Первый способ предотвратить растяжение textarea — это задать ему фиксированную высоту и ширину с помощью […]" data-image=""></span></div></div><meta itemprop="author" content=""><meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="https://uchet-jkh.ru/i/kak-sdelat-ctoby-tekstovaya-oblast-textarea-ne-rastyagivalas/" content="Как сделать, чтобы текстовая область textarea не растягивалась"><div itemprop="publisher" itemscope itemtype="https://schema.org/Organization" style="display: none;"><div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject"><img itemprop="url image" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="uchet-jkh.ru" data-lazy-src="http://uchet-jkh.ru/i/wp-content/uploads/2024/05/1076337.jpg"><noscript><img itemprop="url image" src="http://uchet-jkh.ru/i/wp-content/uploads/2024/05/1076337.jpg" alt="uchet-jkh.ru"></noscript></div><meta itemprop="name" content="uchet-jkh.ru"><meta itemprop="telephone" content="uchet-jkh.ru"><meta itemprop="address" content="https://uchet-jkh.ru/i"></div></main></div><aside id="secondary" class="widget-area" itemscope itemtype="http://schema.org/WPSideBar"><div class="sticky-sidebar js-sticky-sidebar"><div id="wpshop_widget_articles-2" class="widget widget_wpshop_widget_articles"><div class="widget-header">Интересные записи</div><div class="widget-articles"><article class="post-card post-card--small"><div class="post-card__body"><div class="post-card__title"><a href="https://uchet-jkh.ru/i/voriska-bob-kak-stat-vip-vo-vkontakte/">Воришка Боб: как стать VIP во ВКонтакте</a></div></div></article><article class="post-card post-card--small"><div class="post-card__body"><div class="post-card__title"><a href="https://uchet-jkh.ru/i/gde-pisutsya-programmy/">Где пишутся программы</a></div></div></article><article class="post-card post-card--small"><div class="post-card__body"><div class="post-card__title"><a href="https://uchet-jkh.ru/i/ocistka-neizvestnogo-bios-parolya/">Очистка неизвестного BIOS-пароля</a></div></div></article></div></div><div id="custom_html-2" class="widget_text widget widget_custom_html"><div class="textwidget custom-html-widget"><div id="Q_sidebar"></div></div></div></div></aside><div id="related-posts" class="related-posts fixed"><div class="related-posts__header">Вам также может понравиться</div><div class="post-cards post-cards--vertical"><div class="post-card post-card--related post-card--thumbnail-no"><div class="post-card__title"><a href="https://uchet-jkh.ru/i/yaroslavskii-vokzal-raspisanie-i-stoimost-biletov-na-poezda/">Ярославский вокзал: расписание и стоимость билетов на поезда</a></div><div class="post-card__description">Ярославский вокзал — один из крупнейших и наиболее</div><div class="post-card__meta"><span class="post-card__comments">0</span><span class="post-card__views">0</span></div></div><div class="post-card post-card--related post-card--thumbnail-no"><div class="post-card__title"><a href="https://uchet-jkh.ru/i/yaceika-tablicy-kak-ssylka-html/">Ячейка таблицы как ссылка html</a></div><div class="post-card__description">Веб-страницы часто используют таблицы для представления</div><div class="post-card__meta"><span class="post-card__comments">0</span><span class="post-card__views">0</span></div></div><div class="post-card post-card--related post-card--thumbnail-no"><div class="post-card__title"><a href="https://uchet-jkh.ru/i/cto-slucilos-s-perevodcikom-yandeksa/">Что случилось с переводчиком Яндекса?</a></div><div class="post-card__description">Яндекс.Переводчик — популярный онлайн-сервис</div><div class="post-card__meta"><span class="post-card__comments">0</span><span class="post-card__views">0</span></div></div><div class="post-card post-card--related post-card--thumbnail-no"><div class="post-card__title"><a href="https://uchet-jkh.ru/i/yandeks-praktikum-matematika-kak-voiti-kak-ucenik/">Яндекс практикум — математика: как войти как ученик</a></div><div class="post-card__description">В наше время знание математики становится все более важным.</div><div class="post-card__meta"><span class="post-card__comments">0</span><span class="post-card__views">0</span></div></div></div></div></div></div><div class="site-footer-container "><div class="footer-navigation full" itemscope itemtype="http://schema.org/SiteNavigationElement"><div class="main-navigation-inner fixed"><div class="menu-footer_menu-container"><ul id="footer_menu" class="menu"><li id="menu-item-53" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-privacy-policy menu-item-53"><a rel="privacy-policy" href="https://uchet-jkh.ru/i/privacy-policy/">Политика конфиденциальности</a></li><li id="menu-item-54" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-54"><a href="https://uchet-jkh.ru/i/kontakty/">Обратная связь</a></li><li id="menu-item-55" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-55"><a href="https://uchet-jkh.ru/i/soglashenie/">Пользовательское соглашение</a></li></ul></div></div></div><footer id="colophon" class="site-footer site-footer--style-gray full"><div class="site-footer-inner fixed"><div class="footer-bottom"><div class="footer-info"> © 2024 База полезных знаний.</div></div></div></footer></div></div> <script>document.addEventListener("copy", (event) => {var pagelink = "\nИсточник: https://uchet-jkh.ru/i/kak-sdelat-ctoby-tekstovaya-oblast-textarea-ne-rastyagivalas";event.clipboardData.setData("text", document.getSelection() + pagelink);event.preventDefault();});</script><script type="text/javascript" id="reboot-scripts-js-extra">var settings_array = {"rating_text_average":"\u0441\u0440\u0435\u0434\u043d\u0435\u0435","rating_text_from":"\u0438\u0437","lightbox_display":"1","sidebar_fixed":""}; var wps_ajax = {"url":"https:\/\/uchet-jkh.ru\/i\/wp-admin\/admin-ajax.php","nonce":"0741092ba2"};</script> <script>window.lazyLoadOptions = { elements_selector: "img[data-lazy-src],.rocket-lazyload,iframe[data-lazy-src]", data_src: "lazy-src", data_srcset: "lazy-srcset", data_sizes: "lazy-sizes", class_loading: "lazyloading", class_loaded: "lazyloaded", threshold: 300, callback_loaded: function(element) { if ( element.tagName === "IFRAME" && element.dataset.rocketLazyload == "fitvidscompatible" ) { if (element.classList.contains("lazyloaded") ) { if (typeof window.jQuery != "undefined") { if (jQuery.fn.fitVids) { jQuery(element).parent().fitVids(); } } } } }}; window.addEventListener('LazyLoad::Initialized', function (e) { var lazyLoadInstance = e.detail.instance; if (window.MutationObserver) { var observer = new MutationObserver(function(mutations) { var image_count = 0; var iframe_count = 0; var rocketlazy_count = 0; mutations.forEach(function(mutation) { for (i = 0; i < mutation.addedNodes.length; i++) { if (typeof mutation.addedNodes[i].getElementsByTagName !== 'function') { return; } if (typeof mutation.addedNodes[i].getElementsByClassName !== 'function') { return; } images = mutation.addedNodes[i].getElementsByTagName('img'); is_image = mutation.addedNodes[i].tagName == "IMG"; iframes = mutation.addedNodes[i].getElementsByTagName('iframe'); is_iframe = mutation.addedNodes[i].tagName == "IFRAME"; rocket_lazy = mutation.addedNodes[i].getElementsByClassName('rocket-lazyload'); image_count += images.length; iframe_count += iframes.length; rocketlazy_count += rocket_lazy.length; if(is_image){ image_count += 1; } if(is_iframe){ iframe_count += 1; } } } ); if(image_count > 0 || iframe_count > 0 || rocketlazy_count > 0){ lazyLoadInstance.update(); } } ); var b = document.getElementsByTagName("body")[0]; var config = { childList: true, subtree: true }; observer.observe(b, config); } }, false);</script><script data-no-minify="1" async src="https://uchet-jkh.ru/i/wp-content/plugins/rocket-lazy-load/assets/js/16.1/lazyload.min.js"></script><script>function lazyLoadThumb(e){var t='<img loading="lazy" data-lazy-src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360"><noscript><img src="https://i.ytimg.com/vi/ID/hqdefault.jpg" alt="" width="480" height="360"></noscript>',a='<div class="play"></div>';return t.replace("ID",e)+a}function lazyLoadYoutubeIframe(){var e=document.createElement("iframe"),t="ID?autoplay=1";t+=0===this.dataset.query.length?'':'&'+this.dataset.query;e.setAttribute("src",t.replace("ID",this.dataset.src)),e.setAttribute("frameborder","0"),e.setAttribute("allowfullscreen","1"),e.setAttribute("allow", "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"),this.parentNode.replaceChild(e,this)}document.addEventListener("DOMContentLoaded",function(){var e,t,a=document.getElementsByClassName("rll-youtube-player");for(t=0;t<a.length;t++)e=document.createElement("div"),e.setAttribute("data-id",a[t].dataset.id),e.setAttribute("data-query", a[t].dataset.query),e.setAttribute("data-src", a[t].dataset.src),e.innerHTML=lazyLoadThumb(a[t].dataset.id),e.onclick=lazyLoadYoutubeIframe,a[t].appendChild(e)});</script> <script defer src="https://uchet-jkh.ru/i/wp-content/cache/autoptimize/js/autoptimize_8719a8fcc817f74da642350c845eb2cd.js"></script></body></html>