HTML autowrap autocenter charaters in pre-теги

Я хотел поставить рамку, чтобы акцентировать внимание на некоторых запросах, только на одной странице, а не на всем сайте. Поэтому я использовал встроенный стиль, чтобы прототипировать изменение. Мне пришлось обрезать символы внутри предварительных тегов, чтобы они уместились в рамке. Есть ли способ, которым я мог бы автоматически обернуть и автоматически центрировать символы в блоке класса div, не обрезая вручную символы в предварительных тегах?

<!DOCTYPE html>
<html lang = "en">
<!-- header, sitebranding, tagline, and bodycontent -->

<head>
  <title> Casper Support  </title>
  <meta charset = "utf-8"/>
  <link type = "text/css" rel = "stylesheet" href = "wiki.css" />
  <style>
    .box {
      height: 70px ;
      width:  1000px ;
      position: relative  ;
      border: 2px solid #287EC7 ;
      background: #F5F5F5 ;
     }
  </style>
</head>
 <body>
 <h3 id = "overdue_meeting"> The overdue Jira Query </h3>
 <p> query </p>
 <div class = "box">
 <pre> <code> 
  project = Casper AND status != Closed AND (component = "Queue - Support" OR assignee in (casper1, casper2, casper3, casper4, casper5, casper6, casper7, casper8)) AND (duedate < 7d OR duedate < endOfDay() OR duedate is EMPTY) ORDER BY id ASC 
 </code> </pre>
 </div>
 </body> 
</html>

html css

24.08.2018 22:28

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Используйте flexbox для вертикального центрирования

.box {
    display:flex;
    align-items:center;
}

Выключите white-space:pre и используйте text-align:center для обертывания и горизонтального центрирования.

.box pre {
  white-space:normal; /* or white-space:pre-wrap to not collapse spaces */
  text-align:center;
}

.box {
    height: 70px ;
    width:  1000px ;
    position: relative  ;
    border: 2px solid #287EC7 ;
    background: #F5F5F5 ;
    display:flex;
    align-items:center;
   }
.box pre {
  white-space:normal;
  text-align:center;
}

 <h3 id = "overdue_meeting"> The overdue Jira Query </h3>
 <p> query </p>
 <div class = "box">
 <pre> <code> 
  project = Casper AND status != Closed AND (component = "Queue - Support" OR assignee in (casper1, casper2, casper3, casper4,                      casper5, casper6, casper7, casper8)) AND (duedate < 7d OR duedate < endOfDay() OR duedate is EMPTY) ORDER BY id ASC 
 </code> </pre>
 </div>

24.08.2018 22:59

Другие вопросы по теме

Как горизонтально выровнять элементы карты (rmwc) в React?

Перезапись правил CSS для определенных областей

Могу ли я использовать атрибут margin для центрирования тела?

Вложенная левая граница HTML / CSS: повторяющийся визуальный эффект

Как создать форму HTML / PHP, в которой поля ввода текста выровнены по горизонтали бок о бок

Как сделать бутстрап модальным для вертикального выравнивания: вверх

Изменение цвета и текстового значения одноуровневого элемента div при выборе радио

Преобразование атрибута размера шрифта HTML в атрибут размера шрифта CSS

Дополнительный пиксель после CSS-анимации в верхнем левом углу DIV

Невозможно разбить страницу, чтобы не нарушить форматирование таблицы

HTML autowrap autocenter charaters in pre-теги

Ответы 1

Другие вопросы по теме

Похожие вопросы