Номера строк на полях

Вот (как я думаю) правильный способ компоновки (перестраиваемого) html-документа. Ширина ограничивается шириной шрифта, а поля автоматически рассчитываются как симметричные, чтобы содержимое располагалось по центру.

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

body { 
  max-width: 30em;
  margin: 0 auto;
  padding: 2em;
}

<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tellus nisl, sollicitudin ac lorem sit amet, vehicula pretium leo. Curabitur convallis tristique ipsum vel consequat. Maecenas sit amet sem ipsum. Aliquam quis accumsan ante. </p>
<p>Maecenas at mauris euismod, placerat justo vel, ultrices diam. Sed mollis sollicitudin risus vel pharetra. Integer bibendum iaculis magna, ac sagittis mauris elementum non. Vestibulum non aliquam mi. Donec sit amet dui bibendum, consectetur lacus quis, interdum sem. </p>
<p>Integer vitae massa lectus. Nulla placerat, augue at pellentesque viverra, velit odio dapibus felis, at feugiat arcu magna vel mauris. Aliquam sed luctus urna. Morbi magna orci, dignissim ut purus non, mattis vulputate tortor. </p>
</body>

Однако теперь я хочу добавить номера строк на поля/отступы, сохраняя при этом содержимое по центру. И я не уверен, как это сделать.

Чтобы сделать это, каждый абзац должен быть сеткой с числом в первом столбце и текстом во втором столбце.

Это лучший способ сделать это? Если да, то как добиться того же поведения, что и раньше? Как обеспечить центрирование содержимого (во втором столбце)?

Возможно, нам нужен javascript для расчета ширины полей в процентах. Но если нужно использовать js, то, возможно, нам не нужны номера строк и содержимое в одном контейнере html. Может быть, я должен просто сдаться и вставить номера строк.

div {
  display:grid;
  column-gap: 2em
}
.line-number {
  grid-column-start:1
}
p {
  grid-column-start:2
}

<body>
<div>
<p class='line-number'>1</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tellus nisl, sollicitudin ac lorem sit amet, vehicula pretium leo. Curabitur convallis tristique ipsum vel consequat. Maecenas sit amet sem ipsum. Aliquam quis accumsan ante. </p>
</div>
<div>
<p class='line-number'>2</p>
<p>Maecenas at mauris euismod, placerat justo vel, ultrices diam. Sed mollis sollicitudin risus vel pharetra. Integer bibendum iaculis magna, ac sagittis mauris elementum non. Vestibulum non aliquam mi. Donec sit amet dui bibendum, consectetur lacus quis, interdum sem. </p>
</div>
<div>
<p class='line-number'>3</p>
<p>Integer vitae massa lectus. Nulla placerat, augue at pellentesque viverra, velit odio dapibus felis, at feugiat arcu magna vel mauris. Aliquam sed luctus urna. Morbi magna orci, dignissim ut purus non, mattis vulputate tortor. </p>
</div>
</body>

javascript html css

27.11.2022 22:53

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

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

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

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

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

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

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

Ответы 5

Вы можете использовать для этого элементы html <ol> и <li> (я нашел это решение здесь):

ol {
  counter-reset: item;
  padding-left: 0;
}
li {
  width:10em;
  text-align:left;
  display: block;
  margin-bottom: .5em;
  margin-left:  auto;
  margin-right: auto;
}
li::before {
  text-align:right;
  display: inline-block;
  content: counter(item);
  padding-right:0.5em;
  counter-increment: item;
  width: 2em;
  margin-left: -2.5em;
}

<ol>
  <li>One<br>the first sentence.</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tellus nisl, sollicitudin ac lorem sit amet, vehicula pretium leo. Curabitur convallis tristique ipsum vel consequat. Maecenas sit amet sem ipsum. Aliquam quis accumsan ante.</li>
  <li>Maecenas at mauris euismod, placerat justo vel, ultrices diam. Sed mollis sollicitudin risus vel pharetra. Integer bibendum iaculis magna, ac sagittis mauris elementum non. Vestibulum non aliquam mi. Donec sit amet dui bibendum, consectetur lacus quis, interdum sem.</li>
  <li>Integer vitae massa lectus. Nulla placerat, augue at pellentesque viverra, velit odio dapibus felis, at feugiat arcu magna vel mauris. Aliquam sed luctus urna. Morbi magna orci, dignissim ut purus non, mattis vulputate tortor.</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
  <li>Nine<br>Items</li>
  <li>Ten<br>Items</li>
</ol>

Вопрос был о том, как сохранить контент по центру

— 27.11.2022 23:18

Хорошо, вывод теперь тоже центрирован. Пожалуйста, проверьте еще раз.

— 27.11.2022 23:34

Извините, я хотел просто центрировать столбец 2, а не всю сетку.

— 27.11.2022 23:44

27.11.2022 23:08

Вы можете попробовать, как показано ниже:

div {
  display:grid;
  grid-template-columns: 3ch auto 3ch; /* 3ch is a kind of max width for your numbers */
  justify-content: center;
  column-gap: 2em
}
p {
  max-width: 30em;
}

<body>
<div>
<p class='line-number'>1</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tellus nisl, sollicitudin ac lorem sit amet, vehicula pretium leo. Curabitur convallis tristique ipsum vel consequat. Maecenas sit amet sem ipsum. Aliquam quis accumsan ante. </p>
</div>
<div>
<p class='line-number'>2</p>
<p>Maecenas at mauris euismod, placerat justo vel, ultrices diam. Sed mollis sollicitudin risus vel pharetra. Integer bibendum iaculis magna, ac sagittis mauris elementum non. Vestibulum non aliquam mi. Donec sit amet dui bibendum, consectetur lacus quis, interdum sem. </p>
</div>
<div>
<p class='line-number'>3</p>
<p>Integer vitae massa lectus. Nulla placerat, augue at pellentesque viverra, velit odio dapibus felis, at feugiat arcu magna vel mauris. Aliquam sed luctus urna. Morbi magna orci, dignissim ut purus non, mattis vulputate tortor. </p>
</div>
</body>

27.11.2022 23:35

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

div {
  display:grid;
  grid-template-columns: 20px 1fr;
  column-gap: 10px;
}

p {
padding-right:30px;
}

<body>
<div>
<p class='line-number'>1</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tellus nisl, sollicitudin ac lorem sit amet, vehicula pretium leo. Curabitur convallis tristique ipsum vel consequat. Maecenas sit amet sem ipsum. Aliquam quis accumsan ante. </p>
</div>
<div>
<p class='line-number'>2</p>
<p>Maecenas at mauris euismod, placerat justo vel, ultrices diam. Sed mollis sollicitudin risus vel pharetra. Integer bibendum iaculis magna, ac sagittis mauris elementum non. Vestibulum non aliquam mi. Donec sit amet dui bibendum, consectetur lacus quis, interdum sem. </p>
</div>
<div>
<p class='line-number'>3</p>
<p>Integer vitae massa lectus. Nulla placerat, augue at pellentesque viverra, velit odio dapibus felis, at feugiat arcu magna vel mauris. Aliquam sed luctus urna. Morbi magna orci, dignissim ut purus non, mattis vulputate tortor. </p>
</div>
</body>

27.11.2022 23:38

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

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

вот несколько возможных способов:

2 столбца:

body {
  max-width: 30em;
  margin: 0 auto;
  padding: 2em;
}

div {
  display: grid;
  grid-template-columns: 0 1fr;
}

.line-number {
  grid-column-start: 1;
  margin-inline-start: -2em;
}

p {
  grid-column-start: 2
}

/* does stand in the middle ? */
body,
p:not([class]) {
  background: linear-gradient(to left, rgba(0, 0, 0, 0.2) 50%, #0000 50%);
}

<body>
  <div>
    <p class='line-number'>1</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tellus nisl, sollicitudin ac lorem sit amet, vehicula pretium leo. Curabitur convallis tristique ipsum vel consequat. Maecenas sit amet sem ipsum. Aliquam quis accumsan ante. </p>
  </div>
  <div>
    <p class='line-number'>2</p>
    <p>Maecenas at mauris euismod, placerat justo vel, ultrices diam. Sed mollis sollicitudin risus vel pharetra. Integer bibendum iaculis magna, ac sagittis mauris elementum non. Vestibulum non aliquam mi. Donec sit amet dui bibendum, consectetur lacus
      quis, interdum sem. </p>
  </div>
  <div>
    <p class='line-number'>3</p>
    <p>Integer vitae massa lectus. Nulla placerat, augue at pellentesque viverra, velit odio dapibus felis, at feugiat arcu magna vel mauris. Aliquam sed luctus urna. Morbi magna orci, dignissim ut purus non, mattis vulputate tortor. </p>
  </div>
</body>

один столбец:

div {
  max-width: 30em;
  margin: 2em auto;
  padding: 0 2em;
  display: grid;
}

.line-number {
  margin-inline-start: -2em; /* offset */
  position:absolute;         /* off the flow */
}

p {
  margin:0
}

/* does it stand in the middle ? */
body,
div,
p:not([class]) {
  background: linear-gradient(to left, rgba(0, 0, 0, 0.2) 50%, #0000 50%);
}

<body>
  <div>
    <p class='line-number'>1</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tellus nisl, sollicitudin ac lorem sit amet, vehicula pretium leo. Curabitur convallis tristique ipsum vel consequat. Maecenas sit amet sem ipsum. Aliquam quis accumsan ante. </p>
  </div>
  <div>
    <p class='line-number'>2</p>
    <p>Maecenas at mauris euismod, placerat justo vel, ultrices diam. Sed mollis sollicitudin risus vel pharetra. Integer bibendum iaculis magna, ac sagittis mauris elementum non. Vestibulum non aliquam mi. Donec sit amet dui bibendum, consectetur lacus
      quis, interdum sem. </p>
  </div>
  <div>
    <p class='line-number'>3</p>
    <p>Integer vitae massa lectus. Nulla placerat, augue at pellentesque viverra, velit odio dapibus felis, at feugiat arcu magna vel mauris. Aliquam sed luctus urna. Morbi magna orci, dignissim ut purus non, mattis vulputate tortor. </p>
  </div>
</body>

Не сетка, а абсолютный псевдоним

body {
  max-width: 30em;
  margin: 0 auto;
  padding: 2em;
  counter-reset: ps;
}

p:before {
  counter-increment: ps;
  content: counter(ps);
  position: absolute;
  margin-inline-start: -2em;
}


/* does it stand in the middle ? */

body,
p {
  background: linear-gradient(to left, rgba(0, 0, 0, 0.2) 50%, #0000 50%);
}

<body>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tellus nisl, sollicitudin ac lorem sit amet, vehicula pretium leo. Curabitur convallis tristique ipsum vel consequat. Maecenas sit amet sem ipsum. Aliquam quis accumsan ante. </p>
  <p>Maecenas at mauris euismod, placerat justo vel, ultrices diam. Sed mollis sollicitudin risus vel pharetra. Integer bibendum iaculis magna, ac sagittis mauris elementum non. Vestibulum non aliquam mi. Donec sit amet dui bibendum, consectetur lacus quis,
    interdum sem. </p>
  <p>Integer vitae massa lectus. Nulla placerat, augue at pellentesque viverra, velit odio dapibus felis, at feugiat arcu magna vel mauris. Aliquam sed luctus urna. Morbi magna orci, dignissim ut purus non, mattis vulputate tortor. </p>
</body>

@TomHuntington, взгляните на псевдоэлемент и счетчик, этого должно быть достаточно, чтобы выполнить эту работу (третий фрагмент). сетка действительно очень интересная и мощная, но здесь она не нужна ;)

— 27.11.2022 23:49

Увидел это только после того, как выложил свой. Я пока оставлю свой, так как он немного отличается, но общий шаблон псевдоэлемента и абсолютного положения кажется примерно таким же. Хороший пример макета из двух столбцов.

— 27.11.2022 23:53

@OliverRadini Мне нужно определить «поля» контента в html, поэтому я соглашусь с этим. Но держись

— 28.11.2022 00:02

@TomHuntington да, имеет смысл, похоже, хорошее решение

— 28.11.2022 00:04

27.11.2022 23:43

Мне очень нравится, что это будет делать нумерацию автоматически. Я не могу сказать, что это решает вашу проблему на 100%, потому что я не могу сказать, что еще полностью понимаю проблему. Я думаю, что это может сделать это, но я вернусь и снова прочитаю то, что вы ищете.

.wrapper {
  counter-reset: my-awesome-counter;
  max-width: 30em;
  margin: 0 auto;
  padding: 2em;
}
p {
  counter-increment: my-awesome-counter;
  position: relative;
}
p:before {
   content: counter(my-awesome-counter);
   position: absolute;
   left: -15px;
}

<div class = "wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tellus nisl, sollicitudin ac lorem sit amet, vehicula pretium leo. Curabitur convallis tristique ipsum vel consequat. Maecenas sit amet sem ipsum. Aliquam quis accumsan ante. </p>
<p>Maecenas at mauris euismod, placerat justo vel, ultrices diam. Sed mollis sollicitudin risus vel pharetra. Integer bibendum iaculis magna, ac sagittis mauris elementum non. Vestibulum non aliquam mi. Donec sit amet dui bibendum, consectetur lacus quis, interdum sem. </p>
<p>Integer vitae massa lectus. Nulla placerat, augue at pellentesque viverra, velit odio dapibus felis, at feugiat arcu magna vel mauris. Aliquam sed luctus urna. Morbi magna orci, dignissim ut purus non, mattis vulputate tortor. </p>
</div>

Спасибо, это тоже похоже на решение. Не знаю, что лучше margin-inline-start: -2em; или left: -15px;

— 27.11.2022 23:57

@TomHuntington Сейчас я сам собираюсь посмотреть на разницу, не могу сказать, что до этого момента у меня было много звонков, чтобы использовать его, поэтому будет интересно узнать больше.

— 28.11.2022 00:05

@TomHuntington margin-inline-start превратится в margin-left или margin-right в зависимости от языка/директории/направления (rtl vs ltr) вашей страницы. тогда em (или rem) будет соответствовать установленному размеру шрифта. правило становится более общим, и его легче повторно использовать или обновлять. это больше о деталях, чем хуже или лучше.

— 29.11.2022 21:20

27.11.2022 23:46