Как обернуть текст в тег?

Question

Как обернуть текст в тег?

pre теги очень полезны для блоков кода в HTML и для отладки вывода при написании скриптов, но как сделать текст word-wrap вместо печати одной длинной строки?

729 13

html css

13 ответов:

Comments

Ничего не найдено.

adambox · Accepted Answer · 2018-03-15 00:25:14

ответ от на этой странице в 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+ */
}

richelectron · Accepted Answer · 2014-07-11 16:32:56

это отлично работает, чтобы обернуть текст и сохранить пробел в pre - tag:
pre{
    white-space: pre-wrap;
}

Mason240 · Accepted Answer · 2013-12-16 21:04:08

Я обнаружил, что пропуск предварительного тега и использование пробела: предварительная обертка на div-лучшее решение.
 <div style="white-space: pre-wrap;">content</div>

ekerner · Accepted Answer · 2017-05-23 15:10:45

Я предлагаю забыть pre и просто положить его в текстовую область.

ваш отступ останется и ваш код не будет сворачиваться в середине пути или что-то.

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

ниже приведен фрагмент 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/ .

его хорошая настройка, но я просто иду с текстовыми областями на данный момент.

user1433454 · Accepted Answer · 2014-01-20 20:35:11

Это то, что мне нужно. Он удерживал слова от разрыва, но допускал динамическую ширину в области pre.
word-break: keep-all;

vovahost · Accepted Answer · 2017-09-05 11:46:59

Я объединил ответы @richelectron и @user1433454.
Он работает очень хорошо и сохраняет форматирование текста.
<pre  style="white-space: pre-wrap; word-break: keep-all;">

</pre>

Bobby Jack · Accepted Answer · 2008-10-29 21:06:35

Вы можете:
pre { white-space: normal; }
чтобы сохранить моноширинный шрифт, но добавить word-wrap, или:
pre { overflow: auto; }
что позволит фиксированный размер с горизонтальной прокруткой для длинных линий.

Ameer · Accepted Answer · 2015-10-12 15:55:30

попробуй такое

  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
    }

Eduardo Campañó · Accepted Answer · 2008-10-29 21:10:14

попробуйте использовать
<pre style="white-space:normal;">. 
или лучше бросить CSS.

prashant2402 · Accepted Answer · 2013-07-02 10:55:26

мне помогло следующее:
pre {
    white-space: normal;
    word-wrap: break-word;
}
спасибо

feacco · Accepted Answer · 2015-07-17 04:01:11

лучший Кросс-браузер способ работал для меня, чтобы получить разрывы строк и показывает точный код или текст: (chrome, internet explorer, Firefox)

CSS:
xmp{ white-space:pre-wrap; word-wrap:break-word; }
HTML:
<xmp> your text or code </xmp>

Erin Delacroix · Accepted Answer · 2018-09-01 20:22:48

наиболее кратко, это заставляет контент обернуть внутри тега "pre", не нарушая слова. Ура!
pre {
  white-space: pre-wrap;
  word-break: keep-all
}
посмотреть живой пример здесь.

rob_st · Accepted Answer · 2015-05-18 12:26:04

The <pre>-элемент обозначает "предварительно отформатированный текст" и предназначен для сохранения форматирования текста (или чего-либо еще) между его тегами. Поэтому на самом деле не предполагается иметь автоматическую обертку слов или разрывы строк внутри <pre>-Tag

текст в элементе отображается шрифтом фиксированной ширины (обычно курьер), и это сохраняет как пробелы и переносы строк.

источник: w3schools.com, подчеркивает сделанное мною.