предварительный тег - текст переполняет поле - PullRequest
Новая
       14

предварительный тег - текст переполняет поле

2 голосов
/ 25 февраля 2010

Я применил следующий стиль к элементу pre: 

pre {
     background-color: #FFFFCC;
     border: 2px dashed #FF6666;
     padding-top: 7px;
     padding-bottom: 8px;
     padding-left: 10px;
     float: none;
     padding-right: 10px;
     margin: 10px;
    }

Текст переполняет поле. Когда я применил свойство float:right, коробка вела себя так, как и ожидалось, но на больших экранах все остальное естественно плавало вокруг рамки. Не счастлив. EDIT2: я сделал это (но для ie6), используя float + clear. Я отправил еще один вопрос о новых ошибках

Я новичок в CSS и HTML - я уверен, что есть простое решение. Пожалуйста помоги. (

РЕДАКТИРОВАТЬ : ближе к отметке: 

pre {
     background-color: #FFFFCC;
     border: 2px dashed #FF6666;
     padding-top: 7px;
     padding-bottom: 8px;
     padding-left: 10px;
     padding-right: 10px;
     margin: 10px;
     white-space: pre-wrap;
    }

Этот отображает точно так, как я хочу в ie6 - в ff 3.5 текстовые переносы - я знаю, что так и должно быть - но как я могу отнести поведение ie к ff?

Изображения для стилизованного предварительного тега с white-space: pre;

ie6: https://i1032.photobucket.com/albums/a406/dardanov/ie6pre.jpg

image

ff 3.5 : https://i1032.photobucket.com/albums/a406/dardanov/ff35pre.jpg

image

для white-space: pre-wrap; Firefox оборачивается и остается неизменным. Как я могу получить поведение ie (авторасширение поля кода) в ff?

EDIT2 : см. Ответ ниже

Ответы [ 3 ]

3 голосов
/ 26 февраля 2010

Если я правильно читаю ваш вопрос, вы хотите отобразить код / ​​текст, содержащийся в рамке, и этот код не может быть перенесен (если только такие переносы или возврат каретки / перевод строки / etc не присутствуют в коде / сам текст). Вы также хотите, чтобы содержащий элемент увеличил его горизонтальное измерение, чтобы расширить до необходимой ширины текста / кода?

Так, если бы в вашем тексте была самая длинная строка из 20 символов, ваша <pre> имела бы ширину не менее 20 символов, если бы в тексте было 200 символов для самой длинной строки, то она должна растягиваться, чтобы вместить 200 символов?

Если эти предположения верны, то вы не можете - по крайней мере, без javascript - делать то, что вы хотите сделать, поскольку для этого потребуется установить ширину родительского элемента на основе ширины его дочернего элемента. К сожалению CSS стекает вниз по DOM, и только в одностороннем порядке.

Лучшее, что вы можете сделать без JS, это добавить:

overflow: scroll; /* or auto */

или

overflow-x: scroll;

к вашему CSS, который бы поддерживал ширину <pre>, но позволял бы прокручивать, чтобы самые длинные строки оставались не обернутыми.

Если я неправильно понял ваш вопрос, пожалуйста, оставьте комментарий, и я сделаю все возможное, чтобы ответить на ваш вопрос с большей пользой.

1 голос
/ 26 февраля 2010

Помимо проблемы с точкой с запятой, одна важная вещь, которую делает pre-tag, это установить свойство CSS-100 * * white-space на "nowrap" (или "pre", я полагаю, но это просто запутывает вещи) , так что работает именно так, как и должно. Если вы хотите помешать этому, установите «nowrap: normal;». Тем не менее, это заставляет предварительный элемент работать как любой другой элемент вместо того, как он предназначен для работы, что может запутать других людей, работающих с вами. Почему бы просто не использовать элемент div? Чего ты пытаешься достичь?

0 голосов
/ 10 декабря 2013

Я сделал это (ff 3.5, опера 10, т.е. 8, но не ie6 (т.е. не проверено))

Я обернул различные разделы в теги div, стилизованные как показано ниже - в ie6 отображение div с небольшой шириной (если они содержат тег h3) на предварительный тег не влияет. В других браузерах div сжимаются вместе со страницей - на предварительный тег это тоже не влияет. Еще одна небольшая проблема, с которой я столкнулся - это отсутствие правого поля в теге pre. Я отправил другой вопрос на эти

Итак, структура HTML: 

<code><html>
 <head></head>
 <body>
  <div>...</div>   //this div is ok in ie
  <div><h3>Title...</h3>...</div>    //this div is shrunken
  ...
  <div><h3>Title...</h3>...</div>    //this div is shrunken
  <pre>

Заголовок ...

...
// этот div уменьшен ...

Заголовок ...

...
// этот div уменьшен

в стиле: 

pre {
    background-color: #FFFFCC;
    border: 2px dashed #FF6666;
    padding-top: 7px;
    padding-bottom: 8px;
    padding-left: 10px;
    margin: 10px;
    float: left;
    padding-right: 10px;
    clear: both;
}
div {
    float: left;
    clear: both;
}
...