HTML makes column text wrapping automatic

Is it feasible to implement text wrapping into two columns or more in HTML using solely CSS?

I have a series of continuous text enclosed within p tags only, structured as follows:

<div id="needtowrap">
    <p>Lorem ipsum dolor sit amet, ...</p>
    <p>Nulla ullamcorper diam arcu, ...</p>
    <p>In libero diam, facilisis quis urna nec, ...</p>
    <p>Sed varius et mi quis dictum. ...</p>
</div>

I am looking to divide this content into two columns each representing 50% of the text width, similar to features available in Microsoft Word or LibreOffice.

Is this achievable through CSS manipulation alone?

htmlcsstext

Answer №2

Implementing multi-column layouts in CSS using the columns property and its related properties is widely supported by modern browsers. To create a basic two-column layout, simply apply columns: 2 to the desired div element. However, for better browser compatibility, it's recommended to include vendor-prefixed versions of these properties:

#needtowrap {
  -webkit-columns: 2;
  -moz-columns: 2;
  columns: 2;
}
#needtowrap p {
  margin: 0;
}
#needtowrap p + p {
  text-indent: 1em;
}
<div id="needtowrap">
    <p>Lorem ipsum dolor sit amet, ...
  Well we need some real content too.
  Otherwise this looks rather dull.</p>
    <p>Nulla ullamcorper diam arcu, ...
  And some more text to make this look like a paragragh.</p>
    <p>In libero diam, facilisis quis urna nec, ...
  By the way, fake Latin is not good fill text.
  It behaves differently from the texts you will really use.</p>
    <p>Sed varius et mi quis dictum. ...
  But I digress.</p>
</div>

This example employs "literary paragraph" formatting where subsequent paragraphs are indented slightly instead of having default vertical spacing. This style enhances the readability of multi-column layouts compared to standard p formatting commonly seen in office software.

In addition to layout considerations, justification on both sides often improves the appearance of multi-column text. Justified text typically requires hyphenation support for a more polished presentation.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A step-by-step guide on showcasing three post images in separate divs at the bottom of a webpage with Reactjs and Css

In the array below, there are three post photos. When I click on each post button, I should see a corresponding post photo div at the bottom for each post. Issue: I am facing a problem where only one post photo div is being displayed, which keeps replaci ...

cssreactjs

What is the best way to implement CSS rules for a hidden submenu?

Can anyone help me figure out how to apply CSS rules for a hidden submenu? I've attempted to use some JavaScript, but it's not working as expected. Below is a sample of the code I'm working with. The idea is that when you click on the anchor ...

javascriptjqueryhtmlcss

Negative margin causes content to conceal itself

I'm facing an issue with using a negative margin for positioning a label. The label is not showing up as expected. Specifically, I need to place a search box on a blue background but when applying a negative margin, the search box does not appear prop ...

css

The fuse-sidebar elements are not being properly highlighted by Introjs

I have recently developed an angular project that utilizes the fuse-sidebar component. Additionally, I am incorporating introjs into the project. While introjs is functioning properly, it does not highlight elements contained within the fuse-sidebar. The ...

javascriptcssangularintro.js

Displaying JQuery dialogs briefly show their contents before the page finishes loading

Utilizing jquery 1.10.3, I am creating a dialog that is quite intricate. When I say 'intricate', I mean that the dialog's content includes data from a database, such as dropdown lists populated by the results of database queries, alongside s ...

phpjqueryhtmljquery-ui-dialogvisual-artifacts

Having trouble with Javascript not detecting when it's empty?

Recently, I have been attempting to modify the color of a submit button when a form is empty. As a beginner in this area, I am somewhat puzzled as to what mistake I might be making. I will share the current code with you in hopes of receiving some guidance ...

javascriptjqueryhtmlforms

The issue with VS Code is that it is running the wrong file instead of

Whenever I try to run my Python file, it keeps opening the previous HTML file instead. Despite clicking "run" on my Python file in VS Code, the terminal is not executing (as it normally does), and instead VS Code continues to open the previously opened HT ...

pythonhtmlvisual-studio-codeide

What steps can I take to change my single-line navbar into a two-line design?

Lately, I've been working on a website with a navbar that looks like the one in this https://i.sstatic.net/5ptAj.png image. However, I want to change my navbar to look more like the one in this https://i.sstatic.net/KiHCf.png image. I've attemp ...

htmlcssresponsive-designfrontendbootstrap-5

Appending a forward slash at the end of a URL seamlessly directs the user to a serendipitous webpage experience, while

I'm currently developing a project on this website: Interestingly, when you append a forward slash to the end of the URL, all the images mysteriously disappear. Consequently, I am unable to include Google AdWords tracking code at the end of any URLs: ...

javascripthtml.htaccesstracking

Table with expansive width housed in a div container but the div container fails to

How can I make a parent div expand when the child table exceeds the page width? What is the most effective CSS approach to achieve this? ...

htmlcssxhtml

Selenium alert: element click blocked: Another element is in the way of receiving the click

I'm currently using Selenium in an attempt to click on the "show more" option under the "about this show" section on the following URL: https://www.bandsintown.com/e/1024477910-hot-8-brass-band-at-the-howlin'-wolf?came_from=253&utm_medium=we ...

pythonhtmlseleniumgoogle-chromeselenium-chromedriver

Why doesn't the z-index of child elements function properly when their fixed parents share the same z-index value?

I have utilized jsfiddle to replicate my problem. My goal is to position .top .inside above .bottom .inside. I am aware that z-index only functions within its respective position type, for example fixed and absolute do not share the same z-index level. How ...

javascriptjqueryhtmlcss

What steps can be taken to modify the style of a single button belonging to a broader group of elements?

Is there a way to hide the save button within a Vue Modal without affecting other buttons with the same class? .btn.btn-primary { display: none; } Simply targeting .btn-primary in the CSS affects all elements with that class, and adding .modal woul ...

cssvue.jsbuttonmodal-dialog

What is the best way to retrieve the current value of a header cell, including any nested headers?

My handsontable has headers that include checkboxes and select boxes. How can I access the headers to check the value of a select/checkbox inside the header cell? You can view an example in this JSFiddle (with nested headers - same as my project): http:/ ...

javascriptjqueryhtmlhandsontable

Exploring jQuery's parent selector for traversing the DOM

I am currently working with an array that inserts articles into my website. I have a specific requirement where, upon clicking the title (h3), I need to display more information based on the article's index. To achieve this, I believe I should travers ...

javascriptjqueryhtml

Enhancing PHP Markdown to Support Custom CSS Classes

Markdown is a tool I use frequently in my PHP projects, but sometimes I find its output to be too simplistic. I wish I had more control over the layout and design of my content. For example, when inserting an image: <p> <img src="path/to/image. ...

phpcssmarkdown

Arranging div containers with nested content

Within my application, I am dynamically displaying images side by side to users. Users have the ability to assign points to these images, and I would like to give them the option to sort the images based on points, with the highest points displayed first i ...

javascriptjquerysortinghtml

Issues with jQuery UI Sortable and Bootstrap 3 fluid grid causing flickering and disruptions

I have a basic grid layout consisting of 3 columns in each row, all based on Bootstrap 3. To make it fluid, I decided to omit the 'container' class. My goal is to enable sorting functionality using jQuery UI sortable for the columns within each r ...

jqueryhtmlcssjquery-uitwitter-bootstrap-3

Press here to unveil and modify using the Redactor JS WYSIWYG HTML editor

I am working on a project where I have three separate divs that are set to be editable using the attribute contenteditable="true". Additionally, I have configured the redactor wysiwyg toolbar to remain fixed on the page. Here is the structure in HTML: &l ...

jqueryhtmlcsswysiwygredactor

How can I adjust the gravity or positioning of a tipsy tooltip in jQuery?

Is there a way to adjust the position or gravity of Tipsy? The plugin offers various options for gravity that can be set through the script: nw | n | ne | w | e | sw | s | se Currently, I have set it to s position, as shown in this demo: http://jsfiddle. ...

javascriptjquerycsstipsy