HTML5 / CSS3 устанавливает ширину / высоту отображения текста тега <pre> - PullRequest
0 голосов
/ 02 августа 2020

У меня есть предварительно отформатированный текст, который я хочу отобразить дословно в HTML5, поэтому я использую тег pre . Проблема в том, что текст появляется в крошечной рамке с вертикальными и горизонтальными полосами прокрутки. Я заранее знаю размер текста и не хочу горизонтальной или вертикальной прокрутки. Я попытался использовать CSS3 для изменения размера элемента pre, но это не сработало. Я использую последнюю версию FireFox, но мне бы хотелось кросс-браузерное решение.

Есть предложения? Обратите внимание, что это НЕ то же самое, что и ранее заданный вопрос: предварительный тег масштабируется по ширине = 100%

Изменить: вот что я пытаюсь показать. Это какой-то код AWK. Обратите внимание, что не имеет значения, использую ли я тег кода внутри тега экрана.

/2020</ { # matches year in table
  # strip off MM/DD/YYYY in table
  match($0, "[0-9]?[0-9]/[0-9]?[0-9]/2020", y)
  # save MM/DD to array
  data[++k] = substr(y[0], 1, RLENGTH - 5)
  }
  /,[0-9]{3}</ {
           # matches travel count in table
           # comma seperated count in table
           match($0, "([0-9],)?[0-9]{1,3},[0-9]{3}", t)
           # remove commas
           n = t[0]
           gsub(/,/, "", n)
           # save number in array
           data[++k] = n
           }
           END { # output array as json. json array length is k/3 input length.
           # three consecutive input data values go into one json array row.
           # first is MM/DD as string, second and third are numeric values.
           # output is reverse of input order.
           printf("count = [")
           for(i = k - 2; i > 0; i -= 3) {
                 print("['" data[i] "', " data[i+1] ", " data[i+2] "],")
               }
               print("];")
  }

Вот снимок экрана с выводом:

введите описание изображения здесь

1 Ответ

0 голосов
/ 02 августа 2020

Если я правильно понял, вы просто ищете white-space: break-spaces;

pre{
  background: #efefef;
  white-space: break-spaces;
}
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In varius vel sapien a semper. Ut magna risus, consectetur finibus tempor at, lobortis id diam. Curabitur non felis neque. Donec ac nunc in urna sagittis finibus. Integer consequat, velit ac imperdiet commodo,



     ligula libero interdum urna, sit amet efficitur neque arcu eget tellus. Donec molestie, diam ut accumsan ultricies,       neque ligula iaculis elit, sed pulvinar ex quam laoreet urna. Nulla egestas, nunc ut malesuada pulvinar, eros orci elementum odio, sed iaculis mauris libero ac mi. Integer pulvinar lacus magna, eget semper justo viverra ac.
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...