css — HTML как сделать отступ в одну строку без «

Вопрос задан

Изменён 6 лет 2 месяца назад

Просмотрен 10k раз

Как сделать отступ, не используя <br>? Дело в том что <br> генерирует символ переноса строки, который выделяется и копируется вместе с текстом, мне же нужно чтобы этого символа не было.

  • html
  • css
4

Попробуйте что-то подобное:

<p></p>

И css:

.margin-bottom-20 {display:block; margin-bottom:20px}

Ничего не изменится, т.к. текста нет

body {
  font-size: 3em;
}

section {
  float: left;
  border: 1px solid;
}

div + div {
  margin-top: 1.
 
 15em;
}
<section>
  <div>123</div>
  <br>
  <div>456</div>
</section>

<section>
  <div>123</div>
  <div>456</div>
</section>

CSS тебе в помощь. margin-bottom: 20px;

1

А почему Вы не хотите использовать родной тег <p>? При помощи CSS Вы сможете настроить для него нижний отступ (margin-bottom) по высоте одной строки.

2

Вот можно поиграться CSS

.css {
    line-height: 2; //можно в консоли подогнать
}
1

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Как удалить символы переноса строки в строке? — efim360.

ru

За перенос строки на новую линию отвечают специальные символы:

  • возврат каретки — CARRIAGE RETURN (CR)
  • перенос строки — LINE FEED (LF)

Смысл в том, что это именно два символа, а не один. Как правило.

В JavaScript эти символы экранируются специальными последовательностями:

  • \r — возврат каретки — CARRIAGE RETURN (CR)
  • \n
    — перенос строки — LINE FEED (LF)

Обязательно изучите эту таблицу — https://tc39.es/ecma262/multipage/text-processing.html#table-controlescape-code-point-values

ControlEscape Code Point Values — ECMAScript | JavaScript

Способ № 1 — через метод

replaceAll()

Есть строка:

let str = `

 

<!DOCTYPE html>

 

<!—[if IE 9 ]> <html class=»ie9 ru home index » dir=»ltr» lang=»ru»> <![endif]—>

<!—[if IE 10 ]> <html class=»ie10 ru home index » dir=»ltr» lang=»ru»> <![endif]—>

<!—[if (gt IE 9)|!(IE)]><!—>`

В метод нужно передать искомое значение ‘\n‘ и заменяемое значение ‘‘:

str. replaceAll(‘\n‘,»)

 

‘<!DOCTYPE html><\!—[if IE 9 ]> <html class=»ie9 ru home index » dir=»ltr» lang=»ru»> <![endif]—><\!—[if IE 10 ]> <html class=»ie10 ru home index » dir=»ltr» lang=»ru»> <![endif]—><\!—[if (gt IE 9)|!(IE)]><\!—>’

 

Способ № 2 — через метод

replace() и регулярное выражение с глобальным флагом

Это похоже на первый способ, только мы передаём в качестве первого параметра регулярное выражение в литеральном виде — /\n/g (но можно и через конструктор RegExp()).

str.replace(/\n/g,»)

‘<!DOCTYPE html><\!—[if IE
9 ]> <html class=»ie9 ru home index » dir=»ltr»
lang=»ru»> <![endif]—><\!—[if IE
10 ]> <html class=»ie10 ru home index » dir=»ltr»
lang=»ru»> <![endif]—><\!—[if
(gt IE 9)|!(IE)]><\!—>’

 

Способ № 3 — через метод

split() в связке с методом join() — разделитель строки и приведение к массиву

Избавиться от переносов строки можно при помощи метода split() для экземпляров строк, который принимает разделитель и возвращает массив без элементов разделителя. В таком массиве обязательно будут пустые строки.

Так выглядит наша строка с символами переносов:

‘\n\n<!DOCTYPE html>\n\n\n<\!—[if IE 9 ]> <html class=»ie9 ru home index » dir=»ltr» lang=»ru»> <![endif]—>\n<\!—[if IE 10 ]> <html class=»ie10 ru home index » dir=»ltr» lang=»ru»> <![endif]—>\n<\!—[if (gt IE 9)|!(IE)]><\!—>’

Так выглядит разделение строки на составные части по разделителю \n:

str.split(‘\n‘)

массив, который мы получаем после разделения:

[», », ‘<!DOCTYPE html>’, », », ‘<\!—[if IE 9 ]> <html class=»ie9 ru home index » dir=»ltr» lang=»ru»> <![endif]—>’, ‘<\!—[if IE 10 ]> <html class=»ie10 ru home index » dir=»ltr» lang=»ru»> <![endif]—>’, ‘<\!—[if (gt IE 9)|!(IE)]><\!—>’]

Видите пустые строки? Это свидетельство того, что когда-то в исходной строке было несколько символов переноса подряд.

Почему так много переносов? Спросите у того разработчика, который писал генератор HTML-разметки для того сайта. 🙂

 

Что теперь делать? Теперь нужно просто склеить все строки внутри массива в одну строку при помощи метода join() с пустой строкой в качестве параметра:

str.split(‘\n‘).join(»)

 

‘<!DOCTYPE html><\!—[if IE 9 ]> <html class=»ie9 ru home index » dir=»ltr» lang=»ru»> <![endif]—><\!—[if IE 10 ]> <html class=»ie10 ru home index » dir=»ltr» lang=»ru»> <![endif]—><\!—[if (gt IE 9)|!(IE)]><\!—>’

 

Это были три способа того как можно удалить переносы строки в строке JavaScript.

 

Информационные ссылки

Стандарт ECMAScript — Раздел «22.1.3.19 String.prototype.replaceAll ( searchValue, replaceValue )» — https://tc39.es/ecma262/multipage/text-processing.html#sec-string.prototype.replaceall

Стандарт ECMAScript — Раздел «22.1.3.18 String.prototype.replace ( searchValue, replaceValue )» — https://tc39.

es/ecma262/multipage/text-processing.html#sec-string.prototype.replace

Стандарт ECMAScript — Раздел «22.1.3.22 String.prototype.split ( separator, limit )» — https://tc39.es/ecma262/multipage/text-processing.html#sec-string.prototype.split

Стандарт ECMAScript — Раздел «23.1.3.16 Array.prototype.join ( separator )» — https://tc39.es/ecma262/multipage/indexed-collections.html#sec-array.prototype.join

Как добавить разрыв строки в текст html без использования тега html

спросил

Изменено 2 года назад

Просмотрено 20 тысяч раз

Я хочу вставить разрыв строки в текст моего профиля на веб-сайте, который позволяет вставлять только текст, поэтому я не могу использовать теги html.

Я хотел бы знать, можно ли каким-либо образом вставить разрыв строки так же, как вставка пробелов или табуляции с использованием кодов ASCII?

1

Вы можете установить пробел на перед строкой — это будет учитывать возврат каретки.

 р {
    пробел: до строки;
}
 
 
Здравствуйте,\r\nДо свидания!

Отобразится:

 Здравствуйте!
До свидания!

Я думаю, вы ищете такие коды, как ' ' и так далее…
Код возврата переноса: ' '

Возможно, то, что вы ищете, находится там: HTML-коды ASCII

1

Нет. Вы можете ввести, например. символ ПЕРЕВОДА СТРОКИ как , но это не поможет: по правилам HTML он все равно будет восприниматься как еще один пробельный символ, а любая последовательность пробельных символов эквивалентна одному ПРОБЕЛУ в обычном HTML-контенте. Вы не можете переопределить правила HTML для обработки символов самими символами (только разметкой HTML или CSS).

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

Предположим, что текст содержит предложения, и он будет разбит на несколько строк, и вы хотите, чтобы перед определенным предложением был разрыв строки. Затем используйте в предложении неразрывные пробелы вместо обычных. Тогда конкретное предложение, возможно, не поместится на текущей строке и будет отображено на новой строке:

Текст должен отображаться в этом поле. Давайте форсируем разрыв строки.
Этот•текст•начинается•с•новой•строки, так как он не помещается на предыдущей строке без разрыва текста.
(• означает  ).
1

Вы можете использовать тег 

  при отправке электронной почты. 
Внутри этого тега текстовые разрывы строк отображаются как фактические разрывы строк в html. 
 
 
 

  это
  текст с
  разрывы строк


<пред>
это
текст с
разрывы строк
 
2
 В теле mailto это создало новую строку без каких-либо проблем: %0D
 Попробуйте  \n  сразу после того места, где вы хотите разбить строку.
 Вы и все, кто читает это, вероятно, можете использовать это
 %0A
 
0
 Зарегистрируйтесь или войдите в систему 
 Зарегистрируйтесь с помощью Google
 Зарегистрироваться через Facebook
 Зарегистрируйтесь, используя адрес электронной почты и пароль
 
 Опубликовать как гость 
 Электронная почта
 Требуется, но не отображается
 Опубликовать как гость 
 Электронная почта
 Требуется, но не отображается
 css - Предотвратить разрыв строки между элементами html 
 спросил 
 Изменено
 4 месяца назад
 Просмотрено
 4к раз
 Кто-нибудь может помочь, нужно избегать разрыва строки между элементами html;
мой код:
 
 
 80">0,80%
/Карта
 
 текущий результат:
 0,80%
/Карта
 
 ожидаемый:
 0,80%/карта
 
 спасибо
  •  html
  •  css
  •  скрипты
 1
 Проблема в том, что абзацы 
  являются элементами блочного уровня. Таким образом, они по умолчанию всегда отображаются в новой строке и впоследствии вызывают разрыв строки.
  Вариант A: Замена абзаца встроенным элементом: 
 
 0,80%/< a href="">Map 
  Вариант Б. Сделать абзац внутри ссылки встроенным: 
 a p {
  дисплей: встроенный;
} 
 
0,80%
/Карта 
0
 Если вы хотите сохранить тег
 и принять во внимание ответ, используйте  style="display:inline" 
 
 <а href="t">
No related posts.