HTML-тег ‹pre› вызывает разрывы строк

Я использую CSS (через JQuery, но не имеет отношения к этому вопросу), чтобы выделить определенные элементы в файле HTML: я использую теги «pre», чтобы отделить логические элементы в моем файле, но я заметил, что теги «pre» кажется, оставляют новые строки между элементами.

Могу ли я избавиться от них с помощью CSS?

(Или что мне использовать вместо тегов «pre»? Текстовые элементы могут содержать сами элементы HTML: которые не должны не отображаться и должны отображаться буквально как исходный код: отсюда мой первоначальный выбор с "предварительные" теги)

Вот пример используемого мной HTML: (требуется http://docs.jquery.com/Downloading_jQuery для этого примера)

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js">
</script>
</head>
<body>
<pre class="error">
This is an error line.
    stack.trace.blah.blah
    more.blah.blah
    yadda.yadda.blah</pre>
<pre class="ok">
this is not an error line.it contains html
&lt;html&gt;&lt;head&gt;&lt;/head&gt;&lt;body&gt;hello&lt;/body&gt;&lt;/html&gt;</pre>
<pre class="error">
This is an error line.
    stack.trace.blah.blah
    more.blah.blah
    yadda.yadda.blah</pre>
<pre class="ok">

<script type="text/javascript">
    $("pre.error").css({"background-color":"red","color":"white","display":"block","padding":"0", "margin":"0"});
</script>
</body>
</html>

Я использую Firefox 3.6.12. Вот что получается в приведенном выше коде: alt text

И это смоделированный вывод того, что я хочу (переключился на желтый, только потому, что я использовал для этого свой редактор vim, притворись, что он красный!)

альтернативный текст

РЕШЕНИЕ:

Использовать display:inline для всех тегов PRE. (Ранее я применял display:inline только к тегам error в приведенном выше примере и забыл сделать то же самое для предварительных тегов ok.


html css line-breaks newline pre
person monojohnny    schedule 20.11.2010    source источник
comment
Я не совсем уверен, чего вы хотите достичь сейчас. Вы хотите иметь разрывы строк без разрывов строк? Возможно, это поможет смоделировать ожидаемый результат.   -  person hollsk    schedule 20.11.2010
comment
Ах я вижу. Предложение Сотириса установить поля и отступы определенно должно работать в этом случае, поэтому я подозреваю, что что-то переопределяет поля/отступы - возможно, высота строки где-то или даже более конкретное поле где-то еще в вашем CSS. У вас установлен Firebug? Это позволит вам выделить теги pre и выяснить, нет ли мошеннических полей в вашем макете.   -  person hollsk    schedule 20.11.2010
comment
Я получил ответ, который искал здесь, но нахожу захватывающим то, что все, кто отвечает, кажется, ответили на совершенно другой вопрос по сравнению со всеми другими ответами. Ответы включают в себя уровень блока и встроенные элементы, экранирование объектов, обработку пробелов CSS, удаление полей и отступов - все это разные ответы на разные вопросы. Просто наблюдение на самом деле.   -  person Jason    schedule 27.11.2013

Ответы (9)


arrow_upward
34
arrow_downward

Это потому, что <pre> имеет стиль по умолчанию display: block, используйте его в CSS pre { display: inline}

что касается вашего редактирования, вам нужно добавить margin: 0; ко ВСЕМ предварительным блокам, а не только к тем, которые вы хотите стилизовать:

pre {
    display: inline;
    margin: 0;
}

Вы должны стараться избегать стилей с помощью JS, когда это возможно, но если вам действительно нужно:

<script type="text/javascript">
    $("pre.error").css({"background-color":"red","color":"white","display":"block","padding":"0", "margin":"0"});
    $("pre").css({ "margin" : 0, "padding" : 0 })
</script>
person Razor    schedule 20.11.2010
comment
да - не поддерживается из коробки в IE ‹ 7, хотя iirc - сначала установите hasLayout, а затем display: inline;, чтобы он работал там. - person Razor; 20.11.2010
comment
@monojohnny, объясни дальше? :) - person Marko; 20.11.2010
comment
Да: это работает для моего Firefox — мне пришлось добавить дополнительную новую строку в конце каждого содержимого файла pre. - person monojohnny; 20.11.2010
comment
@Marko - я имею в виду, что вместо ‹pre›hello there‹/pre› теперь мне нужно добавить завершающую новую строку, например ‹pre›hello there [новая строка]‹/pre›, чтобы следующий элемент ‹pre› не продолжался где другой закончил. Есть смысл? - person monojohnny; 20.11.2010
comment
На самом деле я здесь ошибаюсь: это не работает для меня. Это может быть что-то, что я сделал, но пока я должен снять отметку с ответа, пока я это делаю... - person monojohnny; 20.11.2010
comment
Извините, Марко - ваше решение, похоже, не сработало (я отредактировал свой первоначальный пост, добавив скриншот и более иллюстрированный код) - возможно, я допустил здесь ошибку... - person monojohnny; 20.11.2010
comment
Хорошо - это действительно работает - спасибо всем - это было потому, что у меня есть смесь тегов pre - и я вводил display:inline только для элементов pre 'error', а не pre 'ok' элементы. Все работает сейчас. Спасибо - person monojohnny; 21.11.2010

arrow_upward
9
arrow_downward

Тег pre — это элемент блочного уровня, поэтому он будет вести себя как любой другой элемент блочного уровня и располагаться вертикально (например, абзац, div и т. д.). Думаю, вместо этого вы можете установить для него display:inline.

Но лучше использовать тег <code>, который по умолчанию является встроенным.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code

person hollsk    schedule 20.11.2010
comment
‹код› + и выигрывает этот. Выглядит правильно и семантически правильно. - person Arve Systad; 20.11.2010
comment
На самом деле тег «код» кажется более сложным в использовании: он удаляет начальные пробелы, тогда как pre (правильно для моего случая) сохраняет их. - person monojohnny; 20.11.2010

arrow_upward
4
arrow_downward

Вы можете заставить тег pre быть встроенным элементом, добавив это в заголовок:

<style type='text/css'> pre {display: inline;} </style>
person tshao    schedule 20.11.2010

arrow_upward
4
arrow_downward

Вы можете исправить с помощью css следующее

pre {
    width: 600px;                          /* specify width  */
    white-space: pre-wrap;                 /* CSS3 browsers  */
    white-space: -moz-pre-wrap !important; /* 1999+ Mozilla  */
    white-space: -pre-wrap;                /* Opera 4 thru 6 */
    white-space: -o-pre-wrap;              /* Opera 7 and up */
    word-wrap: break-word;                 /* IE 5.5+ and up */

    }
person QuyLT    schedule 26.07.2012
comment
Можете ли вы объяснить ответ, чтобы люди могли понять, что вы сделали, чтобы это исправить? - person Cristiano Fontes; 10.10.2012

arrow_upward
2
arrow_downward

Почему вы используете jQuery для чего-то, чего можно добиться с помощью CSS?

<html>
<head>
    <style type="text/css">
    pre {
        display: block;
        padding: 0;
        margin: 0;
    }
    pre.error {
        background-color: red;
        color: white;
    }
    </style>
</head>
<body>
    <pre class="error">
This is an error line.
    stack.trace.blah.blah
    more.blah.blah
    yadda.yadda.blah</pre>
    <pre class="ok">
this is not an error line.it contains html
&lt;html&gt;&lt;head&gt;&lt;/head&gt;&lt;body&gt;hello&lt;/body&gt;&lt;/html&gt;</pre>
    <pre class="error">
This is an error line.
    stack.trace.blah.blah
    more.blah.blah
    yadda.yadda.blah</pre>
</body>
</html>
person Eric    schedule 20.11.2010
comment
У меня есть другие причины использовать JQuery (главным образом, чтобы я мог [более легко] применять стили динамически) - использование JQuery (я бы сказал) не должно быть важным отличием для этой проблемы - поскольку (по сути) JQuery использует просто используя Javascript для применения правил CSS.. (я думал...) - person monojohnny; 19.10.2011
comment
@monojohnny: Какие биты будут динамическими? Вы действительно хотите изменить padding или margin динамически? - person Eric; 19.10.2011

arrow_upward
1
arrow_downward

Вы можете преобразовать исходный код HTML для использования специальных символов вместо < > (например, &lt; &gt;). Вы можете сделать это с помощью блокнота ++, используя плагин TextFX (кодирование HTML), или в eclipse вы можете сделать это с помощью любых инструментов редактирования.

person bkilinc    schedule 20.11.2010
comment
используйте специальные символы вместо ‹ › (например, & lt; ). - person bkilinc; 20.11.2010
comment
вы можете изменить свойства отображения pre, но это не то, для чего pre. pre для предварительно отформатированного текста. - person bkilinc; 20.11.2010
comment
Pre выполняет правильную работу для того, что мне нужно - проблема в том, что он вводит полную новую строку между каждым pre; именно от этой лишней строки я хочу избавиться. - person monojohnny; 20.11.2010

arrow_upward
0
arrow_downward

вы можете использовать padding:0 и margin:0 для pre в css

person Sotiris    schedule 20.11.2010
comment
Спасибо за предложение. Попробовал это (отредактировал мой исходный пост), но все еще не сделал то, что мне нужно. Я добавил скриншот, чтобы показать, что я имею в виду, а также то, что я хочу получить в результате. - person monojohnny; 20.11.2010

arrow_upward
0
arrow_downward 

pre { margin: 0; }

должен дать вам рендеринг на втором изображении. Ваш фрагмент, вероятно, не работает, потому что вы не удаляете поля по умолчанию из pre.ok.

person Ms2ger    schedule 20.11.2010

arrow_upward
0
arrow_downward

Не используйте pre, вместо этого экранируйте символы, которые вы хотите отобразить буквально. Как &lt; и &gt; вместо < и >. Когда вы визуализируете свою страницу, вы можете использовать такую ​​функцию, как htmlentities() (PHP), чтобы экранировать эти символы.

person GolezTrol    schedule 20.11.2010
comment
Итак, вы имеете в виду: используйте «div», «p» или «span» (что бы вы порекомендовали на самом деле?), предварительно обработайте встроенный текст (чтобы «буквировать» любой HTML там) и используйте CSS, чтобы сделать это выглядеть так, как я хочу? - person monojohnny; 20.11.2010