Как в js перенести текст на новую строку

Перенос строк в javasrcipt

Есть строка: var error_text = ‘Password does not meet the requirements: \ — at least 8 characters. \ — at least 1 number. \ — at least 1 lowercase character. \ — at least 1 uppercase character’; я передаю эту строку в метод который выводит ошибку напротив поля ввода: viewError(password_status, password_tooltip, error_text); В методе я задаю текст блоку. Как сделать перенос строк? Я пробовал \n но он не работает.

Отслеживать
задан 25 мая 2016 в 7:46
3,847 4 4 золотых знака 24 24 серебряных знака 53 53 бронзовых знака
если вы хотите перенос в html, то используйте его тэг
. а вообще, и \n должен работать
25 мая 2016 в 7:51

У вас в error_text нет переноса строки, заключите текст в такие кавычки: ` , а в html используйте для вашего блока стиль white-space: pre-wrap;

25 мая 2016 в 7:52

@Tsyklop ну если передавать чистый текст, то да. чтобы работали теги, надо передавать html-код, например метод .innerHTML() P.S. в вашем примере вместо \n стоит просто слэш, вы точно правильно пробовали использовать \n ?

25 мая 2016 в 7:55

Что за блок и с какими он CSS свойствами? Какой код для добавления этого текста Вы используете? Приведите минимально воспроизводимый пример. А то с вашими скупыми данными можно долго гадать на спиритической доске) Просто потому, что с приведенными данными можно обойтись элементарным кодом
, ссылка на jsfiidle и в приведенных сведениях никаких причин обратного поведения нет.

25 мая 2016 в 8:06

А скорее всего вы используете где-то в недрах секретного для нас метода viewError , вместо $(«#element»).html(error_text) метод $(«#element»).text(error_text) , который экранирует все ваши попытки вставить теги.

Свойство overflow-wrap

Свойство overflow-wrap позволяет перенести буквы длинного слова на новую строку, если это слово не влазит в ширину контейнера.

Синтаксис

Значения

Значение по умолчанию: normal .

Пример . Значение normal

В данном примере очень длинное слово не поместится в контейнер и вылезет за его границы (при этом начнется с новой строки):

#elem < word-wrap: normal; overflow-wrap: normal; border: 1px solid red; width: 200px; >

Пример . Значение break-word

А теперь те буквы, которые не помещались, просто перенесутся на следующую строку (при этом длинное слово все равно будет начинаться с новой строки):

#elem < overflow-wrap: break-word; border: 1px solid red; width: 200px; >

Смотрите также

• свойство word-break ,
  которое также позволяет перенести буквы длинного слова на новую строку
• свойство word-wrap ,
  которое является устаревшим названием свойства overflow-wrap
• свойство hyphens ,
  которое включает переносы слов по слогам
• тег wbr ,
  который реализует мягкие переносы средствами HTML
• тег br ,
  с помощью которого можно принудительно заставить перенести текст на новую строку

Как сделать перенос строки в JavaScript?

Небольшая справка по второму типу переноса строки, как результата выводимых данных после форматирования, т.е. то, что уже увидит пользователь. Если при первом варианте мы просто разбивали строку для удобства восприятия исходного кода, но на результат выводимых данных это не влияло, то второй тип как раз влияет. Заметка: При первом типе разрыва строки (\,+) на выходе (например на печать в диалоговое окно) в обоих вариантах всегда будет одна строка. А вот при втором типе (
,\n) каждый разрыв строки так и напечатается с новой строки.

JavaScript: Экранирующие последовательности

Мы хотим показать диалог Матери Драконов со своим ребёнком:

- Are you hungry? - Aaaarrrgh! 

Если вывести на экран строку с таким текстом:

console.log('- Are you hungry?- Aaaarrrgh!'); 

то получится так:

- Are you hungry?- Aaaarrrgh! 

Не то, что мы хотели. Строки расположены друг за другом, а не одна ниже другой. Нам нужно как-то сказать интерпретатору «нажать на энтер» — сделать перевод строки после вопросительного знака. Это можно сделать, используя символ перевода строки: \n .

console.log('- Are you hungry?\n- Aaaarrrgh!'); 

- Are you hungry? - Aaaarrrgh! 

\n — это специальный символ. В литературе его часто обозначают как LF (Line Feed). Возможно вы сейчас подумали, что это опечатка, ведь здесь мы видим два символа \ и n , но это не так. С точки зрения компьютера — это один невидимый символ перевода строки. Доказательство:

// Мы это не изучали, но вы должны знать правду // Ниже код, который возвращает длину строки 'a'.length; // 1 '\n'.length; // 1 . '\n\n'.length; // 2 . 

Почему так сделано? \n — всего лишь способ записать символ перевода строки, но сам перевод строки по своему смыслу – это один символ, правда, невидимый. Именно поэтому и возникла такая задача. Нужно было как-то представить его на клавиатуре. А поскольку количество знаков на клавиатуре ограничено и отдано под самые важные, то все специальные символы реализуются в виде таких обозначений.

Символ перевода строки не является чем-то специфичным для программирования. Все, кто хоть раз печатал на компьютере, использовал перевод строки, нажимая на Enter. Во многих редакторах есть опция, позволяющая включить отображение невидимых символов — с ее помощью можно понять, где они находятся (хотя это всего лишь схематичное отображение, у этих символов нет графического представления, они невидимые):

- Привет!¶ - О, привет!¶ - Как дела?

Устройство, которое выводит соответствующий текст, учитывает этот символ. Например, принтер при встрече с LF протаскивает бумагу вверх на одну строку, а текстовый редактор переносит весь последующий текст ниже, также на одну строку.

\n — это пример экранирующей последовательности (escape sequence). Их ещё называют управляющими конструкциями. Хотя таких символов не один десяток, в программировании часто встречаются всего несколько. Кроме перевода строки, к таким символам относятся табуляция (разрыв, получаемый при нажатии на кнопку Tab) и возврат каретки (только в Windows). Нам, программистам, часто нужно использовать перевод строки \n для правильного форматирования текста.

console.log('Gregor Clegane\nDunsen\nPolliver\nChiswyck'); 

На экран выведется:

Gregor Clegane Dunsen Polliver Chiswyck 

Обратите внимание на следующие моменты:

1. Не имеет значения, что стоит перед или после \n : символ или пустая строка. Перевод будет обнаружен и выполнен в любом случае.
2. Помните, что строка может содержать один символ или вообще ноль символов. А еще строка может содержать только \n . Проанализируйте следующий пример:

console.log('\n'); console.log('Dunsen'); 

Здесь мы сначала выводим строку «перевод строки», а потом делаем вывод обыкновенной строки. Программа выведет на экран:

 
Dunsen

Почему перед строкой Dunsen появилось две пустые строки, а не одна? Дело в том, что console.log() при выводе значения автоматически добавляет в конец символ перевода строки. Таким образом, один перевод строки мы указали явно, передав этот символ экранирующей последовательности аргументом в функцию, а второй перевод строки добавлен самой функцией автоматически. Ещё пример кода:

console.log('Polliver'); console.log('Gregor Clegane'); console.log(); console.log('Chiswyck'); console.log('\n'); console.log('Dunsen'); 

Вывод будет таким:

Polliver Gregor Clegane 
Chiswyck 
Dunsen

console.log('Joffrey loves using \\n'); 

на экран выйдет:

Joffrey loves using \n

Небольшое, но важное замечание про Windows. В Windows для перевода строк по умолчанию используется \r\n . Такая комбинация хорошо работает только в Windows, но создаёт проблемы при переносе в другие системы (например, когда в команде разработчиков есть пользователи как Windows, так и Linux). Дело в том, что последовательность \r\n имеет разную трактовку в зависимости от выбранной кодировки (рассматривается позже). По этой причине, в среде разработчиков принято всегда использовать \n без \r , так как LF всегда трактуется одинаково и отлично работает в любой системе. Не забудьте настроить ваш редактор на использование \n .

Задание

Напишите программу, которая выводит на экран:

- Did Joffrey agree? - He did. He also said "I love using \n". 

При этом программа использует только один console.log() , но результат на экране должен выглядеть в точности, как показано выше.

Упражнение не проходит проверку — что делать? ��

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

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

В моей среде код работает, а здесь нет ��

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Мой код отличается от решения учителя ��

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

В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Прочитал урок — ничего не понятно ��

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

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

Полезное

• Обязательно поэкспериментируйте с выводом разных строк на сайте https://replit.com/languages/nodejs
• История перевода строки

Определения

• Экранирующая последовательность — специальная комбинация символов в тексте. Например, \n — это перевод строки.