Is there a way to design a CSS layout that automatically adjusts text wrapping based on the size of the page and columns?

Question

Is there a way to design a CSS layout that automatically adjusts text wrapping based on the size of the page and columns?

I am attempting to design a CSS page that mimics the appearance of an aged newspaper.

The focus is on ensuring that the page is responsive, with a single column of text on smaller devices. However, the main issue I need help with lies elsewhere.

For larger screens, the layout should consist of either 2 or 3 columns, depending on the screen width.

While I have been successful in achieving this using CSS columns, I would like to add an additional layer of complexity by having the CSS columns wrap per page (set at 100vh).

My requirements are as follows:

The text content should be comprised of multiple variable paragraph tags
The text content must be split into three columns per page
Each page should be relative to the device screen (100vh)
The text must read left-to-right but flow top to bottom per column, similar to a newspaper's layout

Would it be possible to accomplish this layout using CSS Grid or any other method?

Below is an example of the HTML code:

<main class="page-content">
<h1 id="my-article-title">My article title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
...
</main>

Thank you!

Update

Just to clarify further: Essentially, I am aiming for a design that replicates the appearance of a PDF document but in HTML format. I intend to create distinct pages of content, each determined by the viewport size. This would allow the user to read from top to bottom, left to right, across each page.

javascript html css flexbox css-grid

Answer 1

Answer №1

If you're looking for stability in your design, consider using column-fill: balance;. It works well with blocks of any height, even without 100% height. On the other hand, column-fill: auto requires a strict height to function properly. It may look good initially, but it can cause issues if the children's height exceeds that of the parent.

Check out this fullscreen demo to see the difference:

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  width: 100%;
  min-height: 100vh;
  min-height: calc(var(--vh, 1vh) * 100);
  margin: 0;
  padding: 0;
  position: relative;
}

.page-content {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  column-count: 3;
  column-fill: auto;
  padding: 10px;
}

<main class="page-content">
  <h1 id="my-article-title">My article title</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
  ... (content continues)
</main>

For a more flexible approach, consider using flex. This demo showcases how it works:

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  width: 100%;
  min-height: 100vh;
  min-height: calc(var(--vh, 1vh) * 100);
  margin: 0;
  padding: 0;
  position: relative;
}

.page-content {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: flex-start;
}

.page-content>* {
  flex: 0 1 auto;
  width: 33.33%;
  padding: 10px;
  margin: 0;
}

<main class="page-content">
  <h1 id="my-article-title">My article title</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
  ... (content continues)
</main>

For the best results, you might want to consider a plain JavaScript solution. It adapts well to different viewport sizes. Don't forget to cover all direct children within tags for optimal performance.

setDimensions(); 
window.addEventListener('resize', () => {
  setDimensions(); 
});

function setDimensions() {
  let columns = 1;
  // Adjust columns based on window width
  // Check the full code snippet for detailed implementation
}

Full code snippet for plain text handling

Answer 2

If you're looking for stability in your design, consider using column-fill: balance;. It works well with blocks of any height, even without 100% height. On the other hand, column-fill: auto requires a strict height to function properly. It may look good initially, but it can cause issues if the children's height exceeds that of the parent.

Check out this fullscreen demo to see the difference:

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  width: 100%;
  min-height: 100vh;
  min-height: calc(var(--vh, 1vh) * 100);
  margin: 0;
  padding: 0;
  position: relative;
}

.page-content {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  column-count: 3;
  column-fill: auto;
  padding: 10px;
}

<main class="page-content">
  <h1 id="my-article-title">My article title</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
  ... (content continues)
</main>

For a more flexible approach, consider using flex. This demo showcases how it works:

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  width: 100%;
  min-height: 100vh;
  min-height: calc(var(--vh, 1vh) * 100);
  margin: 0;
  padding: 0;
  position: relative;
}

.page-content {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: flex-start;
}

.page-content>* {
  flex: 0 1 auto;
  width: 33.33%;
  padding: 10px;
  margin: 0;
}

<main class="page-content">
  <h1 id="my-article-title">My article title</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
  ... (content continues)
</main>

For the best results, you might want to consider a plain JavaScript solution. It adapts well to different viewport sizes. Don't forget to cover all direct children within tags for optimal performance.

setDimensions(); 
window.addEventListener('resize', () => {
  setDimensions(); 
});

function setDimensions() {
  let columns = 1;
  // Adjust columns based on window width
  // Check the full code snippet for detailed implementation
}

Full code snippet for plain text handling

Is there a way to design a CSS layout that automatically adjusts text wrapping based on the size of the page and columns?

Update

Answer №1

Similar questions

When a link is clicked, it quickly blinks or flashes on the screen

What is the most effective method to activate OnClientCommand from the server's perspective?

Build.js.erb requesting a partial script task

Verify changes in the Cross Domain RSS feed by utilizing Ajax technology

Unveiling the secrets to isolating elements from a list based on distinct characteristics

Implementing onClick functionality in RecyclerView post JSON data extraction

Adjusting responsive behavior with Bootstrap 4 fluid container min-width feature

"Turn off sweep gesture on Surface tablet when using Chrome after pinching to zoom

Issue with calling function from props in React is not being resolved

What is the best way to locate a table of a specific class using jQuery selectors?

Transforming a namespaced function into an asynchronous operation by utilizing setTimeout

Looking to create a pop-up using javascript, css, or jQuery?

Bug causing connection issues in Node.js when dealing with IP redirection

Don't use onchange() in place of keyup()

Creating a responsive layout for displaying products using CSS and HTML

The consistent index is shared among all dynamically generated elements

Monitor the status of an AJAX request for fetching JSON data in a Rails application

Unable to execute PHP alongside a JavaScript event listener

Tips for showing the React-Select array label in a text field

The flat function for JavaScript Arrays is not defined in React Native