HTML-тег вызывает linebreaks

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

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

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

вот пример 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 для этого, притворитесь, что это красный!)

alt text

устранение:

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

9
css html line-breaks newline pre

9 ответов

потому что <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>
21

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

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

http://www.htmlcodetutorial.com/_CODE.html

7

вы можете исправить с помощью 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 */

    }
4

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

<style type='text/css'> pre {display: inline;} </style>
3

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

1

почему вы используете 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>
1

можно использовать padding:0 и margin:0 на pre в css

0
pre { margin: 0; }

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

0

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

0