Как обернуть текст предварительным тегом?
Ответы 13
Ответ от эта страница в CSS:
pre {
white-space: pre-wrap; /* Since CSS 2.1 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
@MediaVince, pre-line уничтожает все пробелы (а не только в начале строки). developer.mozilla.org/en-US/docs/Web/CSS/white-space имеет таблицу, суммирующую поведение значений white-space.
word-wrap: break-word не выполняет то, что задает вопрос, он вызывает перенос строк даже между словами. Вы можете удалить эту строку. В современных браузерах вам не нужны ни -moz, ни другие префиксы.
@Flimm Тем не менее, word-wrap: break-word - это единственный способ заставить Gmail Notifier Pro разбивать строки (и он не разбивает слова пополам). Это означает, что программа использует более старый движок IE. См. Здесь для подтверждения, что это замена white-space в IE 5.5-7 (не 5.5+, говорит Mozilla): developer.mozilla.org/pt-BR/docs/Web/CSS/overflow-wrap.
Вы также можете:
pre { white-space: normal; }
чтобы сохранить моноширинный шрифт, но добавить перенос слов, или:
pre { overflow: auto; }
что позволит фиксированного размера с горизонтальной прокруткой для длинных строк.
О, спасибо за напоминание о переполнении! Отлично подходит для мобильных дисплеев.
Попробуйте использовать
<pre style = "white-space:normal;">.
Или лучше закинуть CSS.
похоже, это работает в IE 7, но не в 6. это единственное предложение, которое казалось многообещающим для IE ... все остальные предложения были хороши для других браузеров ...
nevermind должно быть было кеширование браузера. перезапустил IE 6, и все хорошо. ваше здоровье.
Проблема с этим решением заключается в том, что оно также растворяет символы новой строки ... Например, любое разделение текста на абзацы будет потеряно.
Я предлагаю забыть предварительную версию и просто поместить ее в текстовое поле.
Ваш отступ останется, и ваш код не будет переноситься словами в середине пути или что-то в этом роде.
Легче выделить текстовый диапазон в текстовой области, если вы хотите скопировать в буфер обмена.
Ниже приведен фрагмент php, поэтому, если вы не используете php, то способ упаковки специальных символов html будет отличаться.
<textarea style = "font-family:monospace;" onfocus = "copyClipboard(this);"><?=htmlspecialchars($codeBlock);?></textarea>
Для получения информации о том, как скопировать текст в буфер обмена в js, см .: Как скопировать в буфер обмена в JavaScript?.
Тем не мение...
Я только что проверил блоки кода stackoverflow, и они заключены в тег <code>, завернутый в тег <pre> с помощью css ...
code {
background-color: #EEEEEE;
font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
}
pre {
background-color: #EEEEEE;
font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
margin-bottom: 10px;
max-height: 600px;
overflow: auto;
padding: 5px;
width: auto;
}
Также содержимое блоков кода stackoverflow выделяется синтаксисом с использованием (я думаю) http://code.google.com/p/google-code-prettify/.
Это хорошая настройка, но пока я просто использую текстовые поля.
Разве использование текстовых областей для чего-то другого, кроме ввода, не было бы семантически некорректным? Мне кажется странным решением.
Не так семантически некорректно, как добавление группы стилей форматирования к тегу «pre», когда «pre» предполагает, что содержащийся текст предварительно отформатирован и, следовательно, не требует дополнительного форматирования и должен приниматься как есть;) Я предлагаю не отдать приоритет «семантике» над «функционалом».
Я не думаю, что <pre> имеет какое-либо семантическое значение (в отличие от <code>), это просто означает, что следует сохранить новые строки и несколько пробелов.
Это сокращение от «предварительно отформатированный». Вы предполагаете, что на самом деле это сокращение от pre-formatted-newlines-and-multiple-space-only?
Тип содержимого должен указываться внутренним тегом в зависимости от типа предварительно отформатированного текста. Я бы порекомендовал своим друзьям посетить вики-страницу с предварительными тегами w3c: w3.org/wiki/HTML/Elements/pre
Это отлично подходит для переноса текста и сохранения пробелов в теге pre:
pre {
white-space: pre-wrap;
}
Это потому, что это только CSS 3 - см. отвечать от adambox для большей совместимости.
Вместо этого рассмотрите возможность использования автоматизированного инструмента для добавления префиксов, зависящих от поставщика, например автопрефиксатор.
Мне помогло следующее:
pre {
white-space: normal;
word-wrap: break-word;
}
Спасибо
Я думаю, лучше использовать white-space: pre-wrap;, потому что он уважает пробелы
Я обнаружил, что пропуск pre-тега и использование white-space: pre-wrap в div - лучшее решение.
<div style = "white-space: pre-wrap;">content</div>
Легче, чем популярный ответ. Спасибо!
В моем случае я хотел показать предварительно отформатированный текст, содержащий вкладки, чтобы составить некоторую таблицу. Я использовал ваше решение ПЛЮС, я добавил шрифт monspace, чтобы все столбцы были выровнены: style = "white-space: pre-wrap; font-family:monospace;"
Хотя это может быть проще, использование <pre> для блоков кода может иметь большее семантическое значение.
Хороший, хотя и не совсем про тег <pre>. Однако, спасибо.
Я знаю, что опаздываю на эту игру, но почему это решение лучше, чем устанавливать его один раз в таблице стилей? У меня есть несколько div на одном экране вывода HTML, которым это понадобится. Похоже, что одно исправление элемента в таблице стилей устраняет все проблемы.
@webfrogs Да, лучше всего создать класс .prewrap.
Если лучше всего использовать таблицы стилей, то не означает ли это, что ответ richelectron правильный? (По сравнению с этим?)
Отлично работает, если ваш предварительно отформатированный текст неровный, некоторые из которых являются очень длинными предложениями, которые превышают ширину родительского контейнера.
простой и легкий ответ
Это то, что мне было нужно. Это предотвращало разрыв слов, но допускало динамическую ширину в области pre.
word-break: keep-all;
<pre>-Element означает «предварительно отформатированный текст» и предназначен для сохранения форматирования текста (или чего-то еще) между его тегами. Поэтому на самом деле не предполагается, что в теге <pre>-Tag будет автоматический перенос слов или перенос строк.
Text in a element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks.
источник: w3schools.com, подчеркивает сделанный мною.
Он просто констатирует тот факт, что можно автоматически переносить текст в пре-тег, хотя это не намерение пре-тега автоматически переносить.
Это единственно правильный ответ на вопрос автора. Любой другой ответ или возможное «решение» поощряют неправильное использование элемента <pre>. По сути, если вы хотите поместить тип внутри элемента <pre> и обернуть его, используйте вместо этого тег <p> и стилизуйте его так, как вам нравится, с помощью класса CSS.
Я не понимаю, почему людям полезно давать советы типа «Я умнее тебя». Нет, тег <p> не является подходящей заменой: он не сохраняет ни пробелов, ни разрывов строк. Тег <pre> полезен для сохранения разрывов строк, но иногда необходимо добавить дополнительную упаковку, точно так же, как любой редактор кода может сохранять разрывы строк и добавлять перенос на длинные строки.
Лучший способ кроссбраузерности помог мне получить разрывы строк и показать точный код или текст: (Chrome, Internet Explorer, Firefox)
CSS:
xmp{ white-space:pre-wrap; word-wrap:break-word; }
HTML:
<xmp> your text or code </xmp>
У меня отлично сработало :-)
xmp устарел с HTML 3.2, был полностью удален из HTML5 и никогда не работал должным образом с самого начала. Это не было последовательно реализовано в различных браузерах.
Использование пробела: предварительная переносимость; и перенос слов: break-word; в моем css сохраняет отступ фрагментов (json), предварительная строка удаляет это. (Хром)
Я объединил ответы @richelectron и @ user1433454.
Работает очень хорошо и сохраняет форматирование текста.
<pre style = "white-space: pre-wrap; word-break: keep-all;">
</pre>
Если говорить кратко, это заставляет контент оборачиваться внутри тега pre без разрыва слов. Ваше здоровье!
pre {
white-space: pre-wrap;
word-break: keep-all
}
Используйте white-space: pre-wrap и некоторые префиксы для автоматического разрыва строки внутри pre.
Не используйте word-wrap: break-word, потому что это, конечно же, разбивает слово пополам, что, вероятно, вам не нужно.
white-space:pre-line;(и все варианты, совместимые с браузером) кажется более подходящим в некоторых случаях (например, без вкладок), поскольку он убирает пробел в начале строки (если есть)