수동으로 작업하거나 .js/js 프레임워크를 사용하지 않고도 텍스트를 새 요소로 자동으로 래핑하는 방법입니다.

Question

내가 원하는 것은 Photoshop/Illustrator/기타 소프트웨어의 텍스트 상자 래핑과 유사합니다. 단락을 작성할 수 있지만 "오버플로"되면 해당 텍스트 상자를 채우는 것처럼 다른 텍스트 상자로 이동합니다.

가능하다면 JavaScript를 사용하지 않고 HTML/CSS만 사용하여 이 기능을 구현할 수 있었으면 좋겠습니다. 아니면 적어도 이것이 불가능하므로 다른 솔루션으로 전환해야 한다는 것을 알고 싶습니다.

내가 원하는 것의 시각적 예: https://i.stack.imgur.com/Dzbhv.jpg

CSS 텍스트 래핑과 웹 스크래핑에 대해 본 모든 속성을 시도했지만 원하는 것과 유사한 항목은 하나도 보지 못했습니다.

Answer 1

상자 밖으로 나가지 않도록 표시되는 단어 수를 설정할 수 있지만(고전적인 "자세히 보기") html/css를 통해서만 이를 달성할 수 있을 것으로 생각됩니다.

물론 틀릴 ​​수도 있지만 특정 조건에 따라 통신하고 콘텐츠를 잘라내고 자동으로 다음 div로 건너뛸 수 있는 html이나 css는 보이지 않습니다.

Answer 2

다른 곳에서 매우 가까운 제안을 받았고 이를 필요로 하는 다른 사람들을 돕기 위해 여기에 게시하고 있습니다. 프리 플로트 방법은 없는 것 같지만 column-(x) 속성이 가장 좋은 옵션인 것 같습니다.

일부 문서는 여기에서 찾을 수 있습니다: https://www.w3schools.com/css/css3_multiple_columns.asp

제가 구현한 방식은 자체 설명 클래스(이 경우 threeColumnDiv)를 할당하고 필요할 때마다 사용하는 것입니다.

이상적일 것 같은 또 다른 점은 그리드 행 속성입니다(참조: https://www.w3schools.com/cssref/pr_grid-row.php).

더 필요한 것이 있으면 맞춤 방식으로 해야 할 것 같지만 이러한 극단적인 경우는 드물고 큰 문제가 되지 않을 것 같습니다.

이 문제에 대해 응답하고 도움을 주신 모든 분들께 감사드립니다!