Как обернуть текст в тег?
pre
теги супер-полезны для блоков кода в HTML и для отладки вывода при написании скриптов, но как сделать перенос текста вместо печати одной длинной строки?
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+ */
}
это отлично работает, чтобы обернуть текст и сохранить пробел в pre
- tag:
pre{
white-space: pre-wrap;
}
Я обнаружил, что пропуск предварительного тега и использование пробела: pre-wrap на div-лучшее решение.
<div style="white-space: pre-wrap;">content</div>
Я предлагаю забыть pre и просто поместить его в textarea.
ваш отступ останется, и ваш код не будет завернут в слово посреди пути или что-то в этом роде.
легче выбрать диапазон текста в текстовой области, если вы хотите скопировать в буфер обмена.
ниже приведена выдержка php, поэтому, если вы не в php, то способ упаковки специальных символов html будет отличаться.
<textarea style="font-family:monospace;" onfocus="copyClipboard(this);"><?=htmlspecialchars($codeBlock);?></textarea>
для получения информации о том, как Скопировать текст в буфер обмена в JS см.: Как скопировать в буфер обмена в JavaScript? .
однако...
Я только что проверил блоки кода stackoverflow, и они обернуты тегом , завернутым в тег
с 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/ .
его хорошая настройка, но я просто собираюсь с textareas на данный момент.
Это то, что мне нужно. Он удерживал слова от разрыва, но допускал динамическую ширину в области pre.
word-break: keep-all;
Я объединил ответы @richelectron и @user1433454.
Он работает очень хорошо и сохраняет форматирование текста.
<pre style="white-space: pre-wrap; word-break: keep-all;">
</pre>
Вы можете:
pre { white-space: normal; }
чтобы сохранить шрифт monospace, но добавить перенос слов или:
pre { overflow: auto; }
что позволит фиксированный размер с горизонтальной прокруткой для длинных строк.
попробуй такое
pre {
white-space: pre-wrap; /* CSS 3 */
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+ */
padding:0px;
margin:0px
}
лучший Кросс-браузер способ работал для меня, чтобы получить разрывы строк и показывает точный код или текст: (chrome, internet explorer, Firefox)
CSS:
xmp{ white-space:pre-wrap; word-wrap:break-word; }
HTML-код:
<xmp> your text or code </xmp>
наиболее лаконично, это заставляет контент обернуться внутри тега " pre " без нарушения слов. Ура!
pre {
white-space: pre-wrap;
word-break: keep-all
}
посмотреть живой пример здесь.
на <pre>
-элемент означает "предварительно отформатированный текст" и предназначен для сохранения форматирования текста (или чего-либо еще) между его тегами. Поэтому на самом деле не предполагается иметь автоматическую обертку слов или разрывы строк в <pre>
-Tag
текст в элементе отображается шрифтом фиксированной ширины (обычно курьером), и это сохраняет как пробелы и переносы строк.
источник: w3schools.com, подчеркивает сделанный мной.