Как отключить перенос текста css

Css запретить перенос слов: Как запретить перенос текста? | WebReference

div — Отключить автоматический перенос блока на новую строку. CSS

Здравствуйте. Необходимо чтобы при нехватке места в родительском блоке, дочерние не переносились на новую строку, а скрывались за правым краем и можно было их скроллить

Подскажите каким образом можно это сделать.

#container < border: 2px solid red; width: 350px; height: 120px; overflow-x: auto; overflow-y: hidden; >.image

Для текста есть такая штука white-space: nowrap; Она делает именно то, что вам надо — текст в одну строку! А чтобы работать с другими объектами как с текстом, надо делать их строчными (inline), или строчно-блочными (inline-block). Тогда один объект будет вести себя как одно слово.

inline-block — еще и гораздо более лучший способ выстроить элементы друг за другом Короче говоря, вот ваше решение: http://jsfiddle.net/M8een/1/

У этого способа есть и свои особенности. На инлайны и на инлайн-блоки (как и на текст) влияет вертикальное выравнивание, которое по умолчанию baseline. Сделав плиточную структуру или, скажем, колонки при помощи инлайн-блока хочешь, чтобы они были выравнены по вертикали по верху и надо дополнительно указывать vertical-align: top;

Еще одна особенность в том, что все текстовые разделители (пробелы, табуляции, переносы строк) преобразуются в один пробел между инлайнами и инлайн-блоками. Подобно пробелам между словами. Лечится это многими способами. Вот хорошая статья и дополненое решение: http://jsfiddle.net/M8een/2/

#container < display: flex; border: 2px solid red; width: 350px; height: 120px; overflow-x: auto; overflow-y: hidden; >. image

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

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

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

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

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

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

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

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

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

hyphens — CSS | MDN

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

Правила расстановки переносов зависят от языка. В HTML язык определяется атрибутом lang , и браузеры применяют правила переноса только при присутствии данного атрибута и доступности соответствующего словаря для расстановки переносов. В XML необходимо использовать атрибут xml:lang .

Примечание: Правила, определяющие, как выполняется расстановка переносов, явно не определены в спецификации, поэтому точная расстановка переносов может варьироваться от браузера к браузеру.

/* Keyword values */ hyphens: none; hyphens: manual; hyphens: auto; /* Global values */ hyphens: inherit; hyphens: initial; hyphens: unset;

Свойство hyphens задаётся как одно из ключевых значений, выбранного из списка ниже.

Значения

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

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

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

Примечание: Поведение параметра auto зависит от того, на каком языке применяются правила переноса. Вы должны указать язык с помощью HTML атрибута

lang , чтобы гарантировать, что на этом языке применяется автоматическая расстановка переносов.

Для указания потенциальных точек разрыва строки в тексте вручную используются два символа Unicode:

«Жёсткий» дефис указывает на возможность видимого разрыва строки. Даже если строка в этом месте не переносится, дефис всё равно отображается.

Невидимый «мягкий» перенос. Этот символ не отображается визуально, вместо этого он отмечает место, где браузер должен разорвать слово, если расстановка переносов необходима. В HTML, используйте ­ для вставки мягкого дефиса.

Примечание: Когда HTML-элемент приводит к разрыву строки, дефис не добавляется.

hyphens = 
none | (en-US)
manual | (en-US)
auto

Указание переносов текста

В этом примере используются три класса, по одному для каждой возможной конфигурации свойства hyphens .

HTML

 
none: no hyphen; overflow if needed
 
An extreme­ly long English word
 
manual: hyphen only at ‐ or ­ (if needed)
 
An extreme­ly long English word
 
auto: hyphens where the algorithm decides (if needed)
 
An extreme­ly long English word
 
 

CSS

dd < width: 55px; border: 1px solid black; >dd. none < -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; >dd.manual < -webkit-hyphens: manual; -ms-hyphens: manual; hyphens: manual; >dd.auto

Результат

BCD tables only load in the browser

• content
• overflow-wrap (formerly word-wrap )
• word-break

Last modified: 13 авг. 2022 г. , by MDN contributors

css — Как отключить перенос слов в HTML?

спросил 11 лет, 9 месяцев назад

Изменено 1 год, 11 месяцев назад

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

Новинка! Сохраняйте вопросы или ответы и организуйте свой любимый контент.
Узнать больше.

Я чувствую себя глупо из-за того, что не могу понять это, но как отключить перенос слов? свойство css word-wrap может быть принудительно включено с помощью break-word , но не может быть принудительно выключено (можно оставить только с нормальным значением ).

Как заставить перенос слов отключить ?

Вам нужно использовать CSS пробел атрибут.

В частности, white-space: nowrap и white-space: pre являются наиболее часто используемыми значениями. Первый, кажется, то, что вам нужно.

Добавлены специальные значения webkit, отсутствующие сверху

white-space: -moz-pre-wrap; /* Fire Fox */ пробел: -o-pre-wrap; /* Опера */ пробел: предварительная обертка; /* Хром */ перенос слов: прерывание слова; /* IE */

Интересно, почему вы находите в качестве решения «белое пространство» с «nowrap» или «pre», это неправильное поведение: вы заставляете свой текст помещаться в одну строку! Текст должен разбивать строки, но не слова по умолчанию. Это вызвано некоторыми атрибутами css: переносом слов, переносом переполнения, разрывом слов и дефисами. Таким образом, вы можете иметь:

word-break: break-all; перенос слов: прерывание слова; overflow-wrap: break-word; -webkit-дефисы: авто; -moz-дефис: авто; -ms-дефисы: авто; дефисы: авто;

Таким образом, решение состоит в том, чтобы удалить их или переопределить их с помощью «неустановленных» или «нормальных»:

word-break: unset; перенос слов: не установлен; переполнение: не установлено; -webkit-дефисы: не установлены; -moz-дефис: не установлен; -ms-дефис: не установлен; дефисы: не установлены; ОБНОВЛЕНИЕ

: я также предоставляю доказательства с помощью JSfiddle: https://jsfiddle.net/azozp8rr/

пробел: nowrap; : текст никогда не прерывается, другие значения по умолчанию сохраняются.

пробел: предварительно; : никогда не будет разрывать текст, будет хранить несколько пробелов друг за другом как несколько пробелов, будет прерываться, если явно написано для разрыва (нажатие ввода в html и т. д.)

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

word-break: keep-all;

Если вам нужно решение только для HTML, мы можем просто использовать тег pre . Он определяет «предварительно отформатированный текст», что означает, что он не форматирует перенос слов. Вот краткий пример для пояснения:

раздел < ширина: 200 пикселей; высота: 200 пикселей; отступ: 20 пикселей; фон: #adf; >предварительно

Посмотрите на это, этот текст очень аккуратный, не так ли? Но это не совсем то, чего мы хотим, не так ли? Этого текста не должно быть здесь! Все должно быть там! Что мы можем сделать?
 
На помощь пришел тег pre! Ура! Тем не менее, мы заранее приносим свои извинения за возможные горизонтальные полосы прокрутки.  Если вам нужна поддержка, отправьте заявку в службу поддержки.
Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя электронную почту и пароль
Опубликовать как гость
Обязательно, но не отображается
Опубликовать как гость
Требуется, но не отображается
css — Остановить перенос слов, разделяющих слова
спросил 12 лет, 1 месяц назад
Изменено 4 месяца назад
Просмотрено 125 тысяч раз

Новинка! Сохраняйте вопросы или ответы и организуйте свой любимый контент.  
Узнать больше.
body
Я использовал этот код (выше), чтобы разместить текст в теле в его контейнере. Однако что мне не нравится в этом, так это то, что он разбивает слова.
Есть ли другой способ, при котором слова не будут разбиваться, а будет только разрыв строки после или перед словом?
РЕДАКТИРОВАТЬ: Это для использования в UIWebView .
использовать пробел : nowrap; . Если вы установили ширину элемента, для которого вы устанавливаете это, это должно работать.
обновление — отображаемые данные в Firefox
Пожалуйста, используйте nowrap и значение переноса мне не пришло. Nowrap решил проблему.
пробел: nowrap;
Может быть немного поздно, но вы можете добавить этот css, чтобы остановить разрывы слов:
.  element
У меня была такая же проблема, я решил ее с помощью следующего css:
.className
 Вы можете попробовать это… 
корпус < пробел: предварительно; /* CSS2 */ пробел: -moz-pre-wrap; /* Мозилла */ пробел: -hp-pre-wrap; /* принтеры HP */ пробел: -o-pre-wrap; /* Опера 7 */ пробел: -предварительная обертка; /* Опера 4-6 */ пробел: предварительная обертка; /* CSS 2.1 */ пробел: до строки; /* CSS 3 (и 2.1, кстати) */ перенос слов: прерывание слова; /* IE */ >

 является собственностью IE, а не частью css. обработка firefox правильная. К сожалению, FF не поддерживает мягкий дефис / . так что это не вариант. Возможно, вы могли бы вставить волос или тонкий пробел,  / (проверьте меня на числовом объекте) и / соответственно.
Создание отключит переполнение, а заставит переполнение включить прокрутку.
В моей ситуации я пытаюсь убедиться, что слова переносятся на правильные разрывы слов в ячейках таблицы.
Я обнаружил, что для этого мне нужен следующий CSS.
таблица < макет таблицы: фиксированный; >тд
также проверьте, что больше ничего не меняется word-break to break-word вместо обычного .
Для меня родитель был меньше слова. Добавление будет разбиваться на пробелы, но не на слова :
word-break: initial;
Я использую этот код для нашего веб-сайта, чтобы остановить разбиение слов:
body
Использовать пробел : nowrap;
CSS white-space Свойство
Узнайте больше о примере с пробелами

Проблема разрыва слов в браузере Firefox.
Как отключить перенос текста css

Разработчики обычно предпочитают применять на веб-страницах перенос по словам. Перенос по словам ограничивает текст и помогает предотвратить проблемы с дизайном. Также перенос текста по словам позволяет предотвратить необходимость горизонтальной прокрутки. Однако иногда бывает так, что нужно оставить блок текста на одной строке вне зависимости от ее длины. Вы можете предотвращать разрывы строк и перенос текста по словам для определенных элементов, используя свойство CSS white-space .
В этом учебном модуле мы определим стили одного и того же блока текста четырьмя разными способами, один раз с разрывами строки, а три раза без разрывов строки:
Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.
Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.
Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.
Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.
Это даст вам несколько способов выбрать, нужно ли переносить текст по словам.
Предварительные требования
Для данного обучающего руководства вам потребуется следующее:

Предпочитаемый текстовый редактор кода, например, nano или Visual Studio Code
Интернет-браузер
Знакомство с основами HTML. Чтобы узнать больше, вы можете посмотреть нашу серию учебных модулей Создание сайта с помощью HTML.

Шаг 1 — Предотвращение и форсирование разрывов строки в CSS
На этом шаге мы создадим таблицу стилей с тремя разными классами. Каждый из них будет по разному обрабатывать разрывы строк: первый класс будет разбивать текст на строки стандартным способом, а второй и третий классы запретят создание новой строки и разрыва строки.
Для начала создайте новый файл с именем main.css , используя nano или предпочитаемый редактор:
Добавьте в файл следующий код, после чего у вас появятся три класса CSS, использующие несколько свойств, в том числе white-space :
Наш первый класс — .sammy-wrap . Он определяет шесть общих свойств CSS, в том числе border-radius , background-color , border max-width , padding и margin-bottom . Этот класс создает визуальное поле, но при этом не определяет каких-либо специальных свойств переноса текста. Это означает, что строки будут разбиваться по умолчанию.
Наш второй класс — .sammy-nowrap-1 . Он определяет то же поле, что и .sammy-wrap , но добавляет новое свойство: white-space . Свойство white-space имеет множество опций, и все эти опции определяют обработку пробелов внутри заданного элемента. Здесь мы задаем для свойства white-space значение nowrap , предотвращающее разрывы строк.
Наш третий класс — .sammy-nowrap-2 . Он добавляет свойство white-space и еще два дополнительных свойства: overflow и text-overflow . Свойство overflow обрабатывает переполнение с прокруткой, когда содержимое элемента выходит за границы этого элемента. Свойство overflow может сделать этот контент доступным для прокрутки, видимым или скрытым. Мы зададим для свойства overflow значение hidden , а затем используем свойство text-overflow для дополнительной настройки. Свойство text-overflow помогает сообщить пользователю, что часть текста остается скрытой. Мы установили для него значение ellipsis так, что строка не разрывается и не выходит за пределы поля. CSS скрывает лишний текст и использует значок . для обозначения скрытого текста.
Сохраните и закройте файл.
Теперь у нас имеется таблица стилей и мы готовы создать небольшой файл HTML с примерами текста. Далее мы загрузим веб-страницу в браузер и посмотрим, как код CSS может предотвратить появление разрывов строки.
Шаг 2 — Создание файла HTML
После определения классов CSS вы можете применить их к образцам текста.
Создайте и откройте файл с именем index.html в предпочитаемом редакторе. Обязательно поместите его в ту же папку, что и файл main.css :
Добавьте в файл следующий код, который установит main.css как вашу таблицу стилей , а затем применит классы к полю с образцом текста:
Мы назначили стандартный стиль переноса по словам для первого блока текста, стиль nowrap — для второго, и стиль nowrap со свойством hidden и многоточием — для третьего. Для четвертого образца мы назначили стиль sammy-wrap , но здесь мы обходим перенос строк по умолчанию, вставляя в код HTML неразрывные пробелы (   ). Если вам нужно предотвратить разрывы строки в одном частном случае, неразрывные пробелы могут помочь сделать это быстро.
Откройте файл index.html в браузере и посмотрите результаты. Наши четыре текстовых блока будут выглядеть следующим образом:
Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.
Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.
Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.
Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.
Мы успешно настроили свойства CSS четырьмя разными способами так, чтобы допускать или не допускать разрывы строк.
Заключение
В этом учебном модуле мы использовали CSS, чтобы предотвратить разрывы строк в текстовом блоке. Мы задали стиль текста внутри поля и добавили свойство white-space , чтобы заменить правила переноса текста по умолчанию. Чтобы узнать больше о переносе текста по словам и пробелах, изучите свойство white-space CSS в полном объеме.
Want to learn more? Join the DigitalOcean Community!
Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.
Свойство CSS white-space
CSS имеет прекрасное свойство white-space, которое игнорируется большинством новичков. Вероятно, вы без него сможете работать достаточно долгое время. Но стоит узнать данное свойство поближе и попробовать использовать его в своих работах, то вы будете обращаться к нему снова и снова.
В данном уроке мы разберем свойство CSS white-space в очень практичной манере.
Немного основ HTML
В (X)HTML каждый раз, когда в вашей строке кода встречается несколько следующих друг за другом пробелов, браузер по умолчанию будет обрезать их (или сворачивать) до одного пробела. Такое функционирование очень удобно, потому что позволяет корректно структурировать текст и разделять элементы в (X)HTML, так что их легко читать и редактировать — без создания нежелательных пробелов и переводов строк при выводе в браузере.
Если вам нужно сохранить все пробелы и переводы строк в их оригинальной манере, то вы можете использовать корявого двоюродного брата свойства white-space — тег . Весь контент, помещенный внутрь тега будет выводиться идентично тому, что размещено в тексте кода. В этом случае единичная строка текста будет сдвигать границы своего родительского элемента, если в ней нет символа перевода строки. Таким образом, если по умолчанию в браузере при выводе HTML игнорируются множественные последовательные пробелы, то вы можете изменить такое поведение с помощью тега .
(X)HTML также позволяет использовать пробел без перевода строки (   ). Если вам нужно сохранить в строке несколько последовательных пробелов, которые нельзя сворачивать в один, то можно использовать символы пробела без перевода строки. Также есть старый метод с использованием тега , но данный тег не рекомендуется использовать, так как он выводится из употребления.
Свойство CSS white-space является совершенным методом для выше перечисленных методов (X)HTML, которые контролируют пробелы в тексте документа.
Определение и возможные значения.
С помощью возможных значений свойство white-space дает нам способ через CSS определять, как браузер будет управлять множественными пробелами и символами перевода строки. Конечно, в части документа, которая ограничивается с помощью использования селекторов CSS.
Ниже перечисляются различные значения свойства white-space с демонстрацией их работы:
Значение: normal
Это значение по умолчанию. Если оно задано, то результат вывода в браузере ничем не будет отличаться от обычного. Использовать данное значение следует тогда, когда нужно изменить другое ранее установленное значение свойства white-space, или в случае наследования элементом-потомком нежелательного значения свойства.

Значение: nowrap
Это наиболее часто используемое значение свойства white-space , потому что оно действует почти идентично значению normal , за исключением того, что перевод строки никогда не будет вставлен, даже если строка выходит за границы элемента.
Элемент, который имеет свойство white-space со значением nowrap никогда не будет прерывать строку или встроенный элемент, вместо этого он расширит свои (или родительского элемента) размещая все в одну строку. Но множественные смежные пробелы будут свернуты в один, как обычно.

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

Значение: pre-line
Данное значение работает также как и значение по умолчанию ( normal ), за исключением одного: символы перевода строки в HTML будут действовать при выводе в браузере. Множественные пробелы между элементами сворачиваются в один. Данное значение не поддерживается в Internet Explorer до версии 7, Firefox до версии 3.0, и Opera до версии 9.2. 

Значение: pre-wrap
Данное значение действует также как и pre , за исключением того, что строки будут прерываться в соответствии с границами родительского элемента. Таким образом формирование текста в одну строку с расширением границ производиться не будет, но множественные пробелы и переводы строк сохраняются при выводе в браузере. Данное свойство не поддерживается Internet Explorer до версии 7, и Firefox до версии 3.0. 

Несколько примеров использования
Наиболее ярким примером использования свойства white-space, является применение его к ссылке, которая не должна прерываться символом перевода на новую строку. Взгляните на пример страницы на рисунке ниже:

Сссылка “read more” имеет символ » (») в конце, но по причине недостаточности места, символ перенесен на следующую строку. Такая неприятность может быть исправлена с помощью свойства white-space со значением nowrap , назначенного для ссылки . Ссылка должна быть перемещена целиком на следующую строку без разрывов. Данный пример также демонстрирует факт, что свойство white-space влияет только на контент внутри элемента, к которому оно применено. Таким образом, хотя вся ссылка будет перемещена на следующую строку, текст внутри элемента не будет разделяться символами перевода строки.
Так что значение nowrap свойства white-space может помочь избежать некоторых проблем при форматировании текста документа. Так как значения pre-line и pre-wrap не работают с Internet Explorer, их не рекомендуется широко использовать в своих работах. Однако с расширением поддержки, они могут быть очень полезны при верстке страниц.
Распространенная ошибка новичков
Одной возможной проблемой новичков при использовании данного свойства (как в выше приведенном примере) является предположение, что установка свойства whitespace: nowrap для элемента предотвратит его перевод на следующую строку в случае нарушения границ родительского элемента. Однако свойство white-space действует только на элементы-наследники внутри и не влияет на сам элемент.
Свойство white-space
Свойство white-space позволяет сохранять пробелы и переносы строк.
У него есть два известных значения:

white-space: normal – обычное поведение
white-space: pre – текст ведёт себя, как будто оформлен в тег pre .

Но браузеры поддерживают и другие, которые также бывают очень полезны.
pre / nowrap
Встречаем первую «сладкую парочку» – pre и nowrap .
Оба этих значения меняют стандартное поведение HTML при работе с текстом:
pre :

Сохраняет пробелы.
Переносит текст при явном разрыве строки.

nowrap 

Не сохраняет пробелы.
Игнорирует явные разрывы строки (не переносит текст).

Оба этих значения поддерживаются кросс-браузерно.
Их основной недостаток – текст может вылезти из контейнера.
Для примера, рассмотрим следующий фрагмент кода:
white-space: pre :
Здесь пробелы и переводы строк сохранены. В HTML этому значению white-space соответствует тег PRE .
white-space: nowrap :
Здесь переводы строки проигнорированы, а подряд идущие пробелы, если присмотреться – сжаты в один (например, перед комментарием // ).
Допустим, мы хотим разрешить посетителям публиковать код на сайте, с сохранением разметки. Но тег PRE и описанные выше значения white-space для этого не подойдут!
Злой посетитель Василий Пупкин может написать такой текст, который вылезет из контейнера и поломает вёрстку страницы.
Можно скрыть вылезшее значение при помощи overflow-x: hidden или сделать так, чтобы была горизонтальная прокрутка, но, к счастью, есть другие значения white-space , специально для таких случаев.
pre-wrap/pre-line
Оба поведения отлично прослеживаются на примерах:
white-space: pre-wrap :
Отличный выбор для безопасной вставки кода посетителями.
white-space: pre-line :
Сохранены переводы строк, ничего не вылезает, но пробелы интерпретированы в режиме обычного HTML.
Как отключить тег br
Зачастую в мобильных версиях сайта перенос текста тегом 
только мешает, исключить его влияние можно несколькими способами.
В CSS
Свойство display: none у 
отключает его, но если между словами нет пробелов получается следующее:
Результат:
Пробелы появятся если текст отформатирован с переносами строк.
Результат:
Еще есть способ со свойством content: " " , но работает только в Google Chrome, Opera.
Результат:
В PHP
Можно вырезать тег с помощью регистронезависимой функцией str_ireplace() .
Похожие публикации:

Как оптимизировать css код
Как отключить горизонтальную прокрутку css
Что выбрать arduino или raspberry
Что лучше css v34 или css v91

Как запретить перенос текста в textarea?
При вводе большого количества текста в textarea строки автоматически переносятся. Как это запретить? Чтобы длинная строка уходила на край textarea но оставалась одной строкой?

Вопрос задан более трёх лет назад
2524 просмотра

Комментировать
Решения вопроса 1
Алексей Уколов @alexey-m-ukolov Куратор тега CSS
textarea
Ответ написан более трёх лет назад
Только вот зачем? Textarea же и придумана для многострочного текста.
Алексей Уколов @alexey-m-ukolov Куратор тега CSS
Александр Вульф: автор же не хочет отключить возможность вводить несколько строк, он хочет перенос строк под контроль взять. Функционал при этом никак не меняется, просто при достижении границы поля ввода текст не будет переноситься автоматически.
Ответы на вопрос 0
Ваш ответ на вопрос
Войдите, чтобы написать ответ


JavaScript
+1 ещё

 Как объеденить круговой слайдер(диапозон) с полем ввода и кнопками + и -? 

1 подписчик
6 часов назад
42 просмотра

Перенос текста с помощью CSS и HTML

Сегодня расскажу про HTML и CSS перенос текста. Очень часто возникает ситуация, когда какой-то текст или слово не помещается в блоке и нужно перенести его на следующую строку.

Перенос текса на следующую строку
Для переноса текста можно использовать специальный html тег 
. Это одиночный тег, то есть его не нужно закрывать, и ставится он в том месте, где вам нужно осуществить перенос на следующую строку.
Здесь ну oчень длинный текст, 
который не плохо было бы перенести на новую строку.
Вот что получим:
Здесь ну oчень длинный текст, 
который не плохо было бы перенести на новую строку.
Если вы через CSS задаёте более узкую ширину для блока с текстом то перенос текста осуществляется автоматически. То есть те слова, которые не помещаются в одной строке перескакивают на следующую.
Как сделать CSS перенос слова на следующую строку?
Осуществить перенос слова можно при помощи CSS свойства word-break. 
У данного CSS свойства может быть несколько значений:


Normal – значение по умолчанию, то есть перенос слова не осуществляется и если оно не помещается в блок с текстом, то просто вылезет за его пределы. 
Например: Выглядит не очень! Не правда ли ?!
break-all – переносит часть слова на следующую строку если оно не помещается в блоке с текстом. Вот что получится:


Здесь ну oооооооооооооооочень длинное слово, которое не плохо было бы перенести на новую строку при помощи CSS.
Сам HTML кода блока с текстом для переноса в моём случае выглядит вот так:
Читать:
Как разделить звуковые потоки