#javascript #html #css #angular
#javascript #HTML #css #угловой
Вопрос:
Я пытаюсь создать компонент в angular, который похож на бумагу формата А4.
Когда пользователь вводит в него содержимое, документ расширяется, поскольку я установил только минимальную высоту div в 29,7 см.
Примечание: Этот элемент использует только один div. Добавление нескольких блоков div для каждой страницы нарушило бы поток содержимого между страницами, когда пользователь редактирует.
Я хотел бы отображать номер страницы внизу, когда пользователь вводит в нее содержимое через каждые 27,9 см. Номер страницы должен быть не редактируемым содержимым в div.
Возможно ли это с использованием чистого html и CSS soultion? или это возможно только с новым угловым компонентом?
Элемент выглядит следующим образом.
Заранее спасибо.
StackBlitz https://stackblitz.com/github/rahulgul8/paper
Ожидаемый документ выглядит следующим образом.
Обратите внимание на номера страниц, выделенные красным.
по мере того, как пользователь вводит дальше, и когда снова достигается 29,7 см, элемент снова добавляет номер страницы 3 в конец страницы.
Комментарии:
1. почему бы вам не сохранить высоту контейнера страницы и максимальную длину для определения ввода / текстовой области и поместить текст с номером страницы в нижний угол, как только длина текста станет больше или равна некоторому фиксированному значению?
2. Но это также сделало бы текст номера страницы редактируемым. Я обновлю вопрос для этого.
3. Нет, если вы добавите PageNumber как часть другого дочернего div / span внутри вашей страницы! и оформите его так, как вам нужно
Ответ №1:
Видя ваш пример кода, вы можете добавить номера страниц к своему div , включив эти стили
div:after {
content:attr(data-page);
position:absolute;
bottom:10px;
left:50%;
transform:translateX(-50%);
color:red;
}
И путем добавления data-page="1" к вашему элементу div