html5 — Почему если Label достаточно большой, он переносится на новую строку под Radio?

Всем привет. Не могу понять, почему при верстке HTML страницы на Bootstrap в форме с radio если label большой и выходит за размер блока (делается в 2 строки и более) перепрыгивает на новую строку, и становится как бы под Радио кнопкой, и остается не кликабельное белое поле рядом с кнопкой радио… Подскажите в чем может быть причина, ниже приведен пример моей верстки….

... 
 <div>
 <input type="radio" name="in1" value="1">
       <label for="in1"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</label>
  </div>
...
  • html5
  • bootstrap
  • form
  • input
  • checkbox

Читаем, видим:

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

Выходит, что длинный label переходит на следующую строку и так как занимает всю ширину родительского контейнера + отступы, то текст залезает под радио.

2

Спасибо за направление… Вроде всё же понятно, но почему то был ступор… решил я это добавив класс во внешний блок, сделав все элементы внутри flex и выровнял их по базовой линии…

.flex-radio{
    display: flex;
    align-items: baseline;
}
<div>
 <input type="radio" name="in1" value="1">
       <label for="in1"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</label>
  </div>

Может это и пригодится кому, в частности я уже разобрался почему у меня так криво всё выставлялось. .. я делал анимацию при наведении, для этого пришлось label задать display: block… в общем добавлением flex стилей всё у меня решилось…

1

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

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

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

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

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

Почта

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

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

Почта

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

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

word-break — CSS — Дока

  1. Кратко
  2. Пример
  3. Как пишется
    1. Особенности переноса текста
  4. На практике

Кратко

Скопировано

Свойство word-break определяет, как будет переноситься на новую строку текст при достижении края родительского контейнера.

Пример

Скопировано

p {  word-break: normal;}
          p {
  word-break: normal;
}
Открыть демо в новой вкладке

Как пишется

Скопировано

  • normal — значение по умолчанию, длинные слова или строки с неразрывным пробелом не переносятся, даже если выходят за границы родительского блока.
  • break-all — при достижении границы родительского блока перенос строки будет вставлен между любыми двумя символами.
  • keep-all — перевод строки не будет использован в тексте на китайском, японском или корейском языках. Для текста на других языках будет применено normal.
  • break-word (устаревшее) — разобьёт текст в любом месте, в том числе внутри слова, при достижении границы контейнера даже если доступен перенос по словам.
Открыть демо в новой вкладке

Свойство word-break можно глобально задать для всей страницы, добавив его в стили для селектора body.

Особенности переноса текста

Скопировано

Перенос текста в CSS происходит по определённым правилам, которые могут зависеть от языка и заданных CSS стилей (включает свойства word-break, line-break, white-space, text-align, text-justify и hyphens). Вот некоторые правила из спецификации:

  • Обязательные переносы: текст обязательно переносится на новую строку, если есть символы перевода строки (например, \n).
  • Мягкие переносы: это такие места, где текст переносится на новую строку, если он не умещается в текущей строке. Сюда относятся пробелы и другие символы-разделители. В некоторых языках между символами могут быть и другие мягкие переносы, которые зависят от языковых правил.
  • Дефисы и слоги: в алфавитных языках, таких как английский и русский, слова могут быть разбиты на слоги и перенесены с использованием дефиса и языковых правил (кстати, язык определяется по HTML-атрибуту lang). Автоматическим переносом слов с использованием дефиса управляет свойство hyphens.
  • Особенности языка: некоторые языки имеют специфические правила переноса текста. В идеографических языках, таких как китайский, и слоговых языках, таких как корейский, перенос слов и разрыв строк происходит в других местах (например, между корейскими иероглифами может быть разрыв, даже если между ними нет пробела).

Когда определены возможные места переноса, подбирается подходящее место, учитывающее заданные стили. В случае с длинными словами, ссылками или другой последовательностью символов, которые не умещаются в одной строке, мы можем указать браузеру, как следует переносить текст, используя свойства overflow-wrap и word-break.

Также свойство word-break играет важную роль в CJK языках (китайский, японский и корейский): значение word-break: keep-all запрещает разрывать слова внутри CJK текста, где разрывы строк могут быть нежелательными между определёнными иероглифами.

На практике

Скопировано

Свойство word-break: break-all очень похоже на overflow-wrap: break-word по своей сути. Однако, есть некоторые различия в их работе.

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

Свойство overflow-wrap: break-word пришло на смену word-wrap: break-word. Оно позволяет переносить длинные слова в любом месте, а не только посередине слова. Это означает, что браузер может добавить перенос слова в любом месте, если это позволяет уместить слово внутри контейнера. Это свойство также сохраняет целостность слов, если они могут поместиться внутри контейнера.

Открыть демо в новой вкладке Оценка материала

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

Предыдущий материал

←

text-underline-position

ctrl + alt + ←

Следующий материал

→

word-spacing

ctrl + alt + →

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

Длинные тексты могут казаться неуправляемыми во время веб-дизайна. Но они также могут быть неизбежными, и иногда они пересекают границы. Это может создать свободную объектную модель документа (DOM) с ненужным переполнением, которое неудобно для пользователя.

Но есть и хорошие новости: с такими длинными текстами можно справиться, перенося их на новую строку с помощью CSS. Здесь мы покажем вам, как оборачивать длинные сплошные тексты с помощью CSS.

Как работает перенос текста в CSS

CSS обрабатывает растянутые длинные слова, используя встроенное свойство word-wrap или overflow-wrap .

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

Связанный: что нужно знать о DOM

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

  • break-word : Это фактический синтаксис CSS, который говорит браузеру переносить длинный текст на новую строку.
  • нормальный : Разбивает каждое слово в нормальных точках разделения внутри DOM. Это не влияет на длинные строки.
  • начальный : Это способ браузера по умолчанию для обработки строк. Подобно обычному синтаксису , он не разбивает длинные слова.
  • наследовать : Это говорит дочернему элементу наследовать свойство своего родителя. Но с длинными текстами все равно не работает, разве что применить break-word к родительскому элементу.

Как переносить длинные слова с помощью CSS Word Wrap

Перенос слов на новую строку с помощью CSS прост и не требует громоздких настроек CSS.

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

Давайте посмотрим, как мы можем перенести его на следующую строку, используя CSS-свойство word-wrap :

HTML :

 
 
 Этот-div-содержит-длинный-h3-lorem-текст, показанный на рисунке выше

CSS :

 . wrap-it{ 
 word -wrap: break-word; 
 }

После переноса длинного текста h3 в образец изображения вот результат:

Вот и все!Теперь вы знаете, как переносить слова на новую строку в DOM с помощью CSS

Связано: Как выделить часть веб-страницы с помощью селекторов CSS

Однако, как было сказано ранее, word-wrap и overflow-wrap работают одинаково и принимают схожие свойства.

Чтобы использовать вместо overflow-wrap , просто замените word-wrap на него.

Важно переносить слова на веб-странице

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

Таким образом, применение переноса текста к такому разделу необходимо для сохранения целостности DOM.

html — текст абзаца не переносится на следующую строку

Задавать вопрос

спросил

Изменено 4 года, 8 месяцев назад

Просмотрено 6к раз

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

Код:

 <дел>
    
[100 байт] Сценарий ввода:

    

        <диапазон>
            034840082CFABE6D6DFF54D028353549F5600B28A1757828F1B0E9ECCC0322435BA6D8CA1D76442A6A08000000F09F909F00144D696E65642062792072656E6A69616E66656E670000000000000000000000000000000000000000000000000000000000000

Я также безрезультатно пытался установить для текста разные значения

word-wrap .

No related posts.