HTML <pre>тег вызывает разрывы строк - PullRequest
Новая
       27

HTML <pre>тег вызывает разрывы строк

13 голосов
/ 20 ноября 2010

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

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

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

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

<code><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
this is not an error line.it contains html
<html><head></head><body>hello</body></html>
This is an error line.
    stack.trace.blah.blah
    more.blah.blah
    yadda.yadda.blah


    $("pre.error").css({"background-color":"red","color":"white","display":"block","padding":"0", "margin":"0"});

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

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

alt text

РЕШЕНИЕ:

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

Ответы [ 9 ]

25 голосов
/ 20 ноября 2010

Это потому, что <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>
8 голосов
/ 20 ноября 2010

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

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

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

4 голосов
/ 26 июля 2012

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

    }
3 голосов
/ 20 ноября 2010

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

<style type='text/css'> pre {display: inline;} </style>
1 голос
/ 21 ноября 2010

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



    
    pre {
        display: block;
        padding: 0;
        margin: 0;
    }
    pre.error {
        background-color: red;
        color: white;
    }
    


    
This is an error line.
    stack.trace.blah.blah
    more.blah.blah
    yadda.yadda.blah
this is not an error line.it contains html
<html><head></head><body>hello</body></html>
This is an error line.
    stack.trace.blah.blah
    more.blah.blah
    yadda.yadda.blah
1 голос
/ 20 ноября 2010

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

0 голосов
/ 21 ноября 2010 
pre { margin: 0; }

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

0 голосов
/ 20 ноября 2010

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

0 голосов
/ 20 ноября 2010

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

...