Как сохранить символы пробела при добавлении в базу?
Из textarea все отступы и пробелы нормально сохраняются в базу без особых манипуляций, я так понял у вас проблема с выводом на страницу, решение лежит на поверхности — в HTML, используйте у нужного блока white-space: pre; и всё будет выводиться как нужно. Пример
Отслеживать
ответ дан 3 ноя 2014 в 18:36
MasterAlex MasterAlex
6,167 1 1 золотой знак 12 12 серебряных знаков 23 23 бронзовых знака
Поставил бы Вам 100 плюсов.
3 ноя 2014 в 19:04
- mysql
- php
- javascript
- textarea
- форма
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Свойство 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 действует только на элементы-наследники внутри и не влияет на сам элемент.
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.impressivewebs.com/css-white-space/
Перевел: Сергей Фастунов
Урок создан: 29 Сентября 2010
Просмотров: 26492
Правила перепечатки
5 последних уроков рубрики «CSS»
Забавные эффекты для букв
Небольшой эффект с интерактивной анимацией букв.
Реализация забавных подсказок
Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.
Анимированные буквы
Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.
Солнцезащитные очки от первого лица
Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.
Как сохранять пробелы в html
Подскажите, пожалуйста, как сделать так, чтобы пробелы в тексте, помещенном в div не тримались, то есть не обрезались до его начала, чтобы сохранить форматирование текста, который берется из файла.
—————————
less think — do more
Re: [HTML | PHP] Сохранение пробелов вначале строки
| От: | Schnitzer |
| Дата: | 10.07.08 12:06 |
| Оценка: |
Здравствуйте, Pavel M., Вы писали:
PM>Подскажите, пожалуйста, как сделать так, чтобы пробелы в тексте, помещенном в div не тримались, то есть не обрезались до его начала, чтобы сохранить форматирование текста, который берется из файла.
PM>Спасибо.
Как вариант — преобразовать пробелы в
Re: [HTML | PHP] Сохранение пробелов вначале строки
| От: | Аноним |
| Дата: | 10.07.08 12:29 |
| Оценка: |
Здравствуйте, Pavel M., Вы писали:
PM>Подскажите, пожалуйста, как сделать так, чтобы пробелы в тексте, помещенном в div не тримались, то есть не обрезались до его начала, чтобы сохранить форматирование текста, который берется из файла.
PM>Спасибо.
Как вариант — поместить текст в .
Re: [HTML | PHP] Сохранение пробелов вначале строки
| От: | Роман Дубров | Я@Blogspot |
| Дата: | 10.07.08 15:08 | |
| Оценка: |
Pavel M. пишет:
> Подскажите, пожалуйста, как сделать так, чтобы пробелы в тексте,
> помещенном в div не тримались, то есть не обрезались до его начала,
> чтобы сохранить форматирование текста, который берется из файла.
в зависимости от
—
np: [foobar2000] not started
Posted via RSDN NNTP Server 2.1 beta
Re[2]: [HTML | PHP] Сохранение пробелов вначале строки
| От: | Pavel M. |
| Дата: | 10.07.08 17:36 |
| Оценка: |
Здравствуйте, Роман Дубров, Вы писали:
РД>Pavel M. пишет:
РД>
РД>
РД>
Pre не подходит тем, что пробелы сохраняются, а автоматический перенос строк не работает, в итоге строки вылазят за div с overflow: visible. Xmp — deprecated. Замена всех пробелов на   эквивалентна pre с теми же проблемами. Есть еще варианты? Или какое решение?
—————————
less think — do more
Re: Помогите разобраться с Вконтактом
| От: | Pavel M. |
| Дата: | 11.07.08 06:32 |
| Оценка: |
Здравствуйте, Pavel M., Вы писали:
К примеру на небезызвестном сайте заметки прекрасно сохраняют форматирование на div, я смотрю стили, но что-то не получается у меня сделать тоже самое. Помогите разобраться, пожалуйста.
—————————
less think — do more
Re[3]: [HTML | PHP] Сохранение пробелов вначале строки
| От: | Кодт |
| Дата: | 11.07.08 11:44 |
| Оценка: |
Здравствуйте, Pavel M., Вы писали:
PM> Замена всех пробелов на   эквивалентна pre с теми же проблемами. Есть еще варианты? Или какое решение?
Между последним ведущим пробелом и первым словом можно поставить мягкий перенос. Чтобы, если ширина недостаточна, слово не вывесилось за границу блока, а уехало на вторую строку.
Впрочем, так тоже будет некрасиво, но хотя бы читаемо.
Перекуём баги на фичи!
Re[4]: [HTML | PHP] Сохранение пробелов вначале строки
| От: | Pavel M. |
| Дата: | 11.07.08 14:19 |
| Оценка: |
Здравствуйте, Кодт, Вы писали:
К>Здравствуйте, Pavel M., Вы писали:
К>Заменять нужно, разумеется, не все пробелы — а только ведущие.
Немного не понимаю. Пробелы, находящиеся между неразрывными пробелами все равно же сомнуться. Как сохранить количество?
—————————
less think — do more
Re[5]: [HTML | PHP] Сохранение пробелов вначале строки
| От: | Кодт | |
| Дата: | 11.07.08 15:58 | |
| Оценка: | 4 (1) +1 | |
Здравствуйте, Pavel M., Вы писали:
К>>Заменять нужно, разумеется, не все пробелы — а только ведущие.
PM>Немного не понимаю. Пробелы, находящиеся между неразрывными пробелами все равно же сомнуться. Как сохранить количество?
Зачем пробелы между неразрывными пробелами?
Нужно заменить все ведущие пробелы, кроме последнего, на неразрывные. Последний заодно выступит мягким переносом.
Hello, world.
Hello, world.
Hello, world. Перекуём баги на фичи!
Re[2]: [HTML | PHP] Сохранение пробелов вначале строки
| От: | Centaur |
| Дата: | 12.07.08 06:02 |
| Оценка: |
Здравствуйте, Schnitzer, Вы писали:
PM>>Подскажите, пожалуйста, как сделать так, чтобы пробелы в тексте, помещенном в div не тримались, то есть не обрезались до его начала, чтобы сохранить форматирование текста, который берется из файла.
S>Как вариант — преобразовать пробелы в
Этого нельзя делать, потому что тогда при копировании текста со страницы через буфер в редактор попадут неразрывные пробелы U+00A0 вместо пробелов U+0020.
Re: [HTML | PHP] Сохранение пробелов вначале строки
| От: | Centaur |
| Дата: | 12.07.08 06:17 |
| Оценка: |
Здравствуйте, Pavel M., Вы писали:
PM>Подскажите, пожалуйста, как сделать так, чтобы пробелы в тексте, помещенном в div не тримались, то есть не обрезались до его начала, чтобы сохранить форматирование текста, который берется из файла.
Контекст задачи в студию. Что это за текст, почему он берётся из файла и почему он отформатирован ведущими пробелами?
Если это исходные тексты, то их нужно показывать в , а ширину, если нужно, контролировать через width и overflow-x: auto, потому что перенос без учёта indent’ов всё равно будет выглядеть ужасно (а в случае некоторых языков ещё и синтаксически некорректно).
Если это стихи Маяковского, то, вероятно, надо сделать каждую строку отдельным , а в скрипте, читающем внешний файл, считать ведущие пробелы и добавлять style=»margin-left: ?em».
Во всех остальных случаях форматирование ведущими пробелами неоправданно.
Re[2]: Помогите разобраться с Вконтактом
| От: | c-smile | http://terrainformatica.com |
| Дата: | 16.07.08 00:47 | |
| Оценка: |
Здравствуйте, Pavel M., Вы писали:
PM>Здравствуйте, Pavel M., Вы писали:
PM>К примеру на небезызвестном сайте заметки прекрасно сохраняют форматирование на div, я смотрю стили, но что-то не получается у меня сделать тоже самое. Помогите разобраться, пожалуйста.
Использование свойства CSS размера табуляции для сохранения пробела
По умолчанию страницы HTML при отображении пропускают все, что больше одного пробела, и не показывают лишние пробелы, чтобы не занимать больше места. Наиболее распространенный способ компенсировать это поведение — задать внутренний или внешний отступ влево или вправо от элемента как замену пробелам, и это является лучшим решением в большинстве случаев. Но бывают ситуации, в которых хотелось бы сохранить настоящие символы пробела, например, если это отступы перед строками кода. Код CSS предоставляет эту возможность с помощью свойства размера табуляции. Если нужно показать следующий код:
ol.generic-class property: value; >Можно сохранить табуляцию перед записью “property: value” с помощью свойства размера табуляции, которое поддерживается всеми браузерами, кроме Internet Explorer и Edge, а для браузера Firefox может быть нужна приставка производителя. Чтобы воспользоваться этим свойством и предоставить обходной путь для браузера Internet Explorer, зададим значения свойства, определяющего поведение пробелов, как pre, которое означает, что пробелы сохраняются в браузере, и зададим размер табуляции, равный 4 пробелам:
code white-space: pre; tab-size: 4; >Что создаст следующий визуальный результат:
Обратите внимание на то, что свойство white-space: pre задано на сайте jsfiddle по умолчанию, так что чтобы увидеть результат без его применения, нужно задать этому свойству другое значение: white-space: nowrap, с которым эта запись будет выглядеть следующим образом:
Также можно использовать содержимое псевдоэлементов :before или :after для создания пробелов вместо того, чтобы сохранять табуляцию. Обычно рекомендуется использовать внешние или внутренние отступы вместо этого, но такой вариант тоже возможен:
code:before content: " "; whitespace: pre; >Автор урока Dudley Storey
- Использование разных способов применения стилей CSS
- Использование свойств задания вида подчеркивания ссылок
- Использование наборов изображений в HTML5