Размеры элемента

Html span перенос строки

Помогает выделить стилем часть текста в блоке.

Время чтения: меньше 5 мин

Обновлено 8 сентября 2022

Кратко

Скопировать ссылку «Кратко» Скопировано

С помощью тега можно выбрать часть текста или другой информации в блоке и стилизовать её.

Пример

Скопировать ссылку «Пример» Скопировано

   Добавьте базилик, арахис и чеснок в блендер и перемешайте.  p> Добавьте span class="ingredient">базиликspan>, span class="ingredient">арахисspan> и span class="ingredient">чеснокspan> в блендер и перемешайте. p>    Скопировать Скопировано Не удалось скопировать   

Как понять

Скопировать ссылку «Как понять» Скопировано

Например, хочется, чтобы одно слово в абзаце было написано красным цветом. Помести это слово в коде в контейнер . < / span>и примени к нему CSS-стиль.

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

Как пишется

Скопировать ссылку «Как пишется» Скопировано

 .  span>. span>    Скопировать Скопировано Не удалось скопировать   

Подсказки

Скопировать ссылку «Подсказки» Скопировано

💡 Иногда, чтобы отформатировать часть текста, можно использовать семантические элементы — это те, которые не просто являются контейнерами, а имеют своё значение, например, тег , с помощью которого вы создаёте «шапку» своей страницы с меню и логотипом. Поэтому, если вместо можно использовать семантический тег, например, для выделения автора материала курсивом или для выделения текста жёлтым маркером, то используйте их.

Ещё пример

Скопировать ссылку «Ещё пример» Скопировано

   Разумные люди приспосабливаются к окружающему миру. Неразумные люди приспосабливают мир к себе. Вот почему прогресс определяется действиями неразумных людей. 
Бернард Шоу p class="quote__text"> span class="quote__text-letter">Рspan>азумные люди приспосабливаются к окружающему миру. Неразумные люди приспосабливают мир к себе. Вот почему прогресс определяется действиями неразумных людей. p> p class="quote__author">Бернард Шоуp>    Скопировать Скопировано Не удалось скопировать   

 .quote__text-letter  float: left; /* Обтекание символа текстом справа */ margin-right: 7px; /* Отступ справа */ color: #ed6742; /* Цвет символа */ font-family: "Roboto Slab", serif; /* Шрифт с засечками */ font-size: 52px; /* Размер шрифта */ line-height: 52px; /* Высота строки */> .quote__author  margin-top: 10px; padding: 10px 0; border-top: 1px solid #ed6742; /* декоративная граница */ font-style: italic; font-size: 14px; font-weight: 300;> .quote__text-letter  float: left; /* Обтекание символа текстом справа */ margin-right: 7px; /* Отступ справа */ color: #ed6742; /* Цвет символа */ font-family: "Roboto Slab", serif; /* Шрифт с засечками */ font-size: 52px; /* Размер шрифта */ line-height: 52px; /* Высота строки */ > .quote__author  margin-top: 10px; padding: 10px 0; border-top: 1px solid #ed6742; /* декоративная граница */ font-style: italic; font-size: 14px; font-weight: 300; >    Скопировать Скопировано Не удалось скопировать   

На практике

Скопировать ссылку «На практике» Скопировано

Дока Дог советует

Скопировать ссылку «Дока Дог советует» Скопировано

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

Фишка в том, что в можно встраивать вообще всё, что угодно. Внутри можно собирать целые блоки, списки и, по факту, он может работать не только с текстом: я такое встречал очень часто. можно встраивать друг в друга сколько угодно раз, чего не сделаешь, например, с тегом

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

Егор Левченко советует

Скопировать ссылку «Егор Левченко советует» Скопировано

🛠 — строковый элемент, поэтому по умолчанию у него нет высоты. Если нужна высота, то элементу стоит задать display : block или display : inline — block , или подумать: «А не нужен ли там ?»

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

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

Например, выделим цветом важное для нас сообщение внутри заголовка на первом экране:

    We are  the best   company    header class="header"> h1 class="header__title"> We are span class="header__title-accent header__title-accent_color"> the best span> span class="header__title-accent"> company span> h1> header>    Скопировать Скопировано Не удалось скопировать   

 .header  display: flex; justify-content: center; align-items: center; min-height: 480px; background: #18191c url("../images/background.svg") no-repeat center / cover; z-index: 0; color: #ffffff;> .header__title  max-width: 500px; color: #fff; font-family: "Roboto", sans-serif; font-size: 25px; text-align: center; text-transform: uppercase; font-weight: normal; line-height: 30px; letter-spacing: 1px;> /* задаём стили для текста, который нужно выделить */.header__title-accent  display: block; /* перенос на новую строку */ font-size: 55px; line-height: 58px; font-weight: bold;> /* цветовой акцент */.header__title-accent_color  color: #000000; background-color: #FF8630;> .header  display: flex; justify-content: center; align-items: center; min-height: 480px; background: #18191c url("../images/background.svg") no-repeat center / cover; z-index: 0; color: #ffffff; > .header__title  max-width: 500px; color: #fff; font-family: "Roboto", sans-serif; font-size: 25px; text-align: center; text-transform: uppercase; font-weight: normal; line-height: 30px; letter-spacing: 1px; > /* задаём стили для текста, который нужно выделить */ .header__title-accent  display: block; /* перенос на новую строку */ font-size: 55px; line-height: 58px; font-weight: bold; > /* цветовой акцент */ .header__title-accent_color  color: #000000; background-color: #FF8630; >    Скопировать Скопировано Не удалось скопировать   

Источник

Строчные элементы

Строчными называются такие элементы, которые являются непосредственной частью строки, у них значение свойства display установлено как inline . Элементы, для которых это значение задано по умолчанию, — , , , и др., в основном они используются для изменения вида текста или его смыслового выделения.

Особенности строчных элементов

Перечислим характерные особенности строчных элементов.

Свойства, связанные с размерами (width, height), не применимы.

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

Размер элемента равен его содержимому плюс значения margin, border и padding.

Несмотря на то, что явно задать размеры элемента нельзя, на него можно влиять косвенно с помощью свойств margin , border и padding , значения которых суммируются с размерами содержимого (пример 1).

Пример 1. Размеры элемента

Заголовок

В данном примере внутрь блочного элемента добавлен строчный элемент и для него уже заданы свойства margin , padding и border . Это сделано для того, чтобы линия была строго под текстом (рис. 1), а не на всю длину блока, как получилось бы, добавь мы border для h1 напрямую.

Заметьте одну особенность — для строчных элементов margin работает только по горизонтали, но никак не вертикали. Таким образом, свойства margin-top и margin-bottom не действуют.

Срочные элементы переносятся на другую строку при необходимости.

Раз мы имеем дело со строками, то текст, естественно, переносится, чтобы строка целиком поместилась по ширине. Перенос текста, как правило, происходит в месте пробела и может разделить наш строчный элемент на две части и более. Это не страшно, пока к элементу не применяется стилевое оформление. На рис. 2 показано, как фон и рамка разбивается на две части.

Чтобы запретить перенос текста внутри элемента, добавьте свойство white-space со значением nowrap (пример 2).

Перенос текста считается за пробел.

В коде HTML любой перенос текста воспринимается браузером как пробел, это касается и размещения элементов на отдельных строках. Сравните два абзаца в примере 3. В первом абзаце каждый располагается на отдельной строке, а во втором абзаце код идёт сплошной строкой без пробелов и переносов.

Пример 3. Перенос но новую строку

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

Рис. 3. Пробелы между элементами

В строчно-блочных элементах мы ещё вернёмся к этой особенности.

Можно выравнивать по вертикали с помощью свойства vertical-align.

Свойство vertical-align выравнивает элементы относительно друг друга по вертикали, что позволяет делать верхний и нижний индексы, задавать выравнивание содержимого ячеек таблицы, задавать положение блоков и др. В примере 4 показано выравнивание картинок и текста по середине друг друга.

Пример 4. Использование vertical-align

Результат данного примера показан на рис. 4.

Рис. 4. Выравнивание картинок и текста

Преобразование в строчный элемент

Строчные элементы можно превращать в блочные с помощью свойства display и его значения block . Также возможно и обратное действие через значение inline и преобразование блочного элемента в строчный (пример 5).

Результат данного примера показан на рис. 5.

Внимание! Превращение элемента в строчный не даёт право нарушать структуру кода HTML и порядок вложения элементов.

Надо понимать, что HTML и CSS проверяются независимо друг от друга и какие бы вы манипуляции не производили с элементами через стили, на HTML это не оказывает влияние. Код HTML в любом случае должен быть корректным с точки зрения синтаксиса HTML.

Источник

Как перенести span на следующую строку с помощью css?

А чем обосновано использование только css? Почему бы не использовать div вместо span? Или использовать
. В конце концов если вы пропишите display: block; в .lineBreak, то просто превратите span в div.

Dalp, или, можно было бы на js вставить br на определенном размере экрана, но если можно, было бы хорошо на чистом css

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

Не понятно зачем спану абсолют. А если нужен абсолют, то о каком переносе речь?

Богдан Пономаренко, выше вам написали. я просто удалил ответ, думал тут все запутаней. но так и не понятно что когда нужно)

Богдан Пономаренко, для чего тебе он абсолютом — ты это обьясни. всю ситуацию обрисуй. тогда тебе помогут нормально сделать.

Владислав Черненко, у меня в спане происходят постоянные изменения текста (каждые пару секунд меняется слово), поэтому я сделал его абсолютным, чтобы не влиял на разметку (т.к. постоянно происходит перенос текста и сдвигает нижестоящие элементы). И вот мне нужно, чтобы при определенном размере это слово было перенесено на другую строку (т.к. уползает за границы экрана). Подробней тут botisho.realnost.club

Абсолюту нужно добавить координаты и relative тому родителю относительно которого вы собрались его позиционировать.

В противном случае вы получите типа того https://jsfiddle.net/43egpv92/

Богдан Пономаренко, не спасет вас absolute, слово будет налазить на контент поверх него. Проще тогда заголовку задать:

Источник

Html span перенос строки

       
 
Бернард Шоу
  

Результат данного примера показан ниже.

Рис. 1. Вид текста, оформленного с помощью тега и стилей

Статьи по теме

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Типы тегов

HTML5

Блочные элементы

Строчные элементы

Универсальные элементы

Нестандартные теги

Осуждаемые теги

Видео

Документ

Звук

Изображения

Объекты

Скрипты

Списки

Ссылки

Таблицы

Текст

Форматирование

Формы

Фреймы

Источник