Как добавить пунктирное подчеркивание для каждой строки в элементах многострочного списка

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

Вот пример моей темы

body {
  background-color: #f5f5f5;
  width: 600px;
  margin: 0 auto;
  padding: 0;
}

h4 {
  color: #cd0000;
  font-size: 42px;
  letter-spacing: -2px;
  text-align: left;
}

.list {
  color: #555;
  font-size: 22px;
  padding: 0 !important;
  width: 1000px;
  font-family: courier, monospace;
  border: 1px solid #dedede;
}

.list li {
  list-style: none;
  border-bottom: 1px dotted #ccc;
  text-indent: 25px;
  height: auto;
  padding: 10px;
  text-transform: capitalize;
}

.list li:hover {
  background-color: #f0f0f0;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
}

.lines {
  border-left: 1px solid #ffaa9f;
  border-right: 1px solid #ffaa9f;
  width: 2px;
  float: left;
  height: 495px;
  margin-left: auto;
}

<div class = "lines"></div>

<ul class = "list">
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

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

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

Пожалуйста, любая помощь будет оценена по достоинству!

Чтобы уточнить: вы имеете в виду, что хотите, чтобы отдельные пунктирные строки в одном и том же <li> имели пунктирную линию и эффекты наведения, как если бы они были разделены на несколько элементов списка?

— 20.05.2024 20:14

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

— 20.05.2024 20:15

Спасибо за ответ. Не могли бы вы уточнить требование в вашем вопросе?

— 20.05.2024 20:30

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

— 20.05.2024 20:33

Да, я понял, я просил отредактировать ваш вопрос для разъяснения другим людям, которые просматривают этот пост, поскольку ваше исходное разъяснение находится под удаленным постом. Особенно в этом случае решение находится за пределами моего знания.

— 20.05.2024 20:47

Спасибо @SyndRain, я буду использовать оформление текста, как вы сказали, и постараюсь исправить поля текста. если возможно, предложите еще раз свое решение, чтобы проголосовать за него!

— 20.05.2024 21:02

Спасибо за ответ. Хотя я бы посоветовал вам подождать, если у кого-то есть лучшее решение. Я упомянул украшение текста, потому что подумал, что это именно тот эффект, который вам нужен. Повторяющийся фон с линейным градиентом высотой 1lh может быть возможен, я просто не знаю, как сделать его пунктирным.

— 20.05.2024 21:03

Пожалуйста, ознакомьтесь с разделом Как задавать вопросы, а затем измените заголовок, чтобы задать четкий и конкретный вопрос.

— 20.05.2024 22:44

html css

20.05.2024 19:44

Улучшение производительности загрузки с помощью 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

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

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

body {
  --background-color: 245, 245, 245;
  background-color: rgb(var(--background-color));
  width: 600px;
  margin: 0 auto;
  padding: 0;
}

h4 {
  color: #cd0000;
  font-size: 42px;
  letter-spacing: -2px;
  text-align: left;
}

.list {
  color: #555;
  font-size: 22px;
  padding: 0 !important;
  width: 1000px;
  font-family: courier, monospace;
  border: 1px solid #dedede;
}

.list li {
  --dot-color: 204, 204, 204;
  list-style: none;
  text-indent: 25px;
  min-height: 1lh;
  text-transform: capitalize;
  --line-background: var(--background-color);
  background-color: rgb(var(--line-background));
  background-image: linear-gradient(to right, rgba(var(--line-background), 1) 0, rgba(var(--line-background), 1) 50%, rgba(var(--dot-color), 0) calc(50% + 1px), rgba(var(--dot-color), 0) 100%), linear-gradient(to top, rgb(var(--dot-color)) 0 1px, rgb(var(--line-background)) 1px 100%);
  background-size: 2px 1lh;
}

.list li:hover {
  --line-background: 240, 240, 240;
  /* transition: all 0.2s; */
}

.lines {
  border-left: 1px solid #ffaa9f;
  border-right: 1px solid #ffaa9f;
  width: 2px;
  float: left;
  height: 495px;
  margin-left: auto;
}

<div class = "lines"></div>

<ul class = "list">
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </li>
  <li>Lorem ipsum dolor sit amet,</li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Используйте text-decoration, чтобы добиться того же эффекта пунктирного подчеркивания.

.list li {
  text-decoration: underline dotted #ccc 1px;
}

body {
  background-color: #f5f5f5;
  width: 600px;
  margin: 0 auto;
  padding: 0;
}

h4 {
  color: #cd0000;
  font-size: 42px;
  letter-spacing: -2px;
  text-align: left;
}

.list {
  color: #555;
  font-size: 22px;
  padding: 0 !important;
  width: 1000px;
  font-family: courier, monospace;
  border: 1px solid #dedede;
}

.list li {
  list-style: none;
  border-bottom: 1px dotted #ccc;
  text-indent: 25px;
  height: auto;
  padding: 10px;
  text-transform: capitalize;
  text-decoration: underline dotted #ccc 1px;
}

.list li:hover {
  background-color: #f0f0f0;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
}

.lines {
  border-left: 1px solid #ffaa9f;
  border-right: 1px solid #ffaa9f;
  width: 2px;
  float: left;
  height: 495px;
  margin-left: auto;
}

<div class = "lines"></div>

<ul class = "list">
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

20.05.2024 20:18

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

Прикрепленный заголовок таблицы перекрывается с панелью навигации

Правая граница гибкого элемента div не учитывается в окнах просмотра с узкой шириной

Верхний и нижний колонтитулы не занимают всю ширину

Как разместить изображения там, где я хочу?

Почему мои пользовательские шрифты больше не загружаются онлайн?

Как перерисовать компонент в +layout.svelte

Как создать несколько раскрывающихся кнопок

Цвет не меняется при смене темы

Лигатуры не отображаются на веб-сайте, но в Google Fonts все в порядке

Apexcharts показывает ось даты и времени за пределами длины серии

Как добавить пунктирное подчеркивание для каждой строки в элементах многострочного списка

Ответы 1

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

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