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

Troubleshooting the problem of fast rotation and scrolling of text in the middle but slow movement at the end with

Currently, I am utilizing the jquery animate function for animating text while also aiming to rotate the text if a specific degree is passed. In order to achieve this, I have implemented the following code snippet: var leftCss = "-"+$('#mydiv'). ...

javascriptjqueryioscssanimation

What is the best way to dynamically change the JSON-LD Script for the Schema?

Below is the script in question. Please read through it carefully. <script type="application/ld+json"> { "@context": "http://schema.org/", "@type": "Product", "name": "Bat, &q ...

javascriptphphtmljqueryajax

Align and resize image using CSS styling

Seeking assistance on centering and cropping images using CSS. Tried implementing the technique from this specific article. However, experiencing inconsistencies in device UI output. Can someone shed light on this behavior? Scenario: The objective is t ...

htmlcssangularsassionic3

Having trouble compiling your Vue project and running into the "No mixed spaces and tabs" error?

Below are the details with an error: Error Details: Failed to compile. ./src/components/Header.vue Module Error (from ./node_modules/eslint-loader/index.js): H:\project\VueProjects\stock-trader\src\components\Header.vue 27: ...

htmlcssvue.js

Sneaky footer paired with a side panel

Trying to incorporate a sticky footer within the content area of a page that includes a full-height sidebar. Here is a preview of the page I'm currently working on: I have experience using in the past with success, utilizing methods involving percen ...

htmlcss

The script ceased functioning immediately following the inclusion of a case-insensitive search feature and interactive images

In the process of creating my inaugural project featuring a collection of images, I wanted to include a filter/search bar at the top. This bar would dynamically filter the displayed pictures based on user input. For example, typing "Aatrox" into the search ...

javascripthtmlcss

Having trouble retrieving the toDataURL data from a dynamically loaded image source on the canvas

Currently, I am working on a project that involves a ul containing li elements with images sourced locally from the "/images" folder in the main directory. <section class="main"> <ul id="st-stack" class="st-stack-raw"> ...

javascriptjqueryhtmlcanvastodataurl

attempting to shift course, but finding no success

I'm attempting to include dir=rtl or direction: rtl in the CSS, but it doesn't seem to have any effect on the browser and the content still displays left to right. What steps can I take to fix this? This template is pre-made from Colorlib. It&ap ...

javascripthtmlcsstwitter-bootstrap

The arrow icon that I included in my bootstrap project seems to have disappeared from my view

While trying to enhance my footer, I attempted to include an arrow-up-circle icon. However, after adding the code, the icon doesn't appear. Here is the html snippet I used: <html> <head> <link href="https://cd ...

htmlcssbootstrap-4bootstrap-5

Should we make it a routine to include shared sass variables in each vue component for better practice?

Within my Vue application, there are numerous components that rely on shared variables like colors. I'm considering having each component import a global "variables.scss" file. Would this approach have any adverse effects? ...

cssvue.jssass

Ensure that the body background image remains stretched and perfectly centered regardless of the screen resolution

I am having an issue with vertical centering on a website I created. Everything looks fine on my monitor, but at higher resolutions, the tables don't align in the center and the image shrinks. How can I ensure that everything stays aligned properly? ...

htmlcss

Experiencing a problem with inline JavaScript onclick

I recently came across a fantastic pure javascript code for a smooth scrolling function, but I'm struggling with integrating it into an inline onclick function. My understanding of javascript is quite limited and I could really use some help... <d ...

javascripthtmlonclick

Ways to verify if a web URL is contained within an HTML textbox

In the process of developing a frontend form for WordPress, I have incorporated a basic HTML textbox for users to input a web URL. My goal now is to ensure that the entered value is indeed a valid URL and not just arbitrary text. Is there a way to perfor ...

phphtmlwordpressforms

When utilizing ng-content alongside *ngtemplateOutlet, the content does not appear visible within the DOM

I'm working with three Angular components - a base component and two child components (child1 and child2). The structures are as follows: child1.component.html <ng-template #child1Template> <div> <h1>CHILD 1</h1> ...

htmlangularparent-childng-contentngtemplateoutlet

The Less compiler (lessc) encounters an issue on a fresh operating system. ([TypeError: undefined is not a function])

After setting up my new development environment on Windows 10, I encountered an issue with less. Following the instructions on lesscss.org, I installed less using: npm install -g less The installation process completed without any errors. However, when ...

javascriptcssnpmless

"The sliding function of the React Bootstrap carousel is malfunctioning as it goes blank just before transitioning

Here is the code snippet I am working with: Whenever the carousel transitions to the next image, the current image disappears before displaying the next one. I am using react-bootstrap version 5.1.0, but it seems like there may be an issue with the transi ...

javascriptcssreactjscarouselreact-bootstrap

What is the best way to use JavaScript to fill in missing images with alternative HTML content?

As a provider of a service that helps users find the location of pictures, I face a challenge due to the fact that the pictures are stored on another internal site. Some users may not have access to this site as my service offers additional information. Th ...

javascripthtmlcss

On a Samsung tablet with Moodle, the body background image is set to display at the top

Encountered an issue with Sambungs tables. I have a background image set on the body. Here is how the CSS looks: html, body{ background: url('img/background.jpg') no-repeat; background-position: top; // I also tried cover, fixed, etc } The ...

htmlcssmoodle

What is the best way to create vertical separators between CSS grid elements?

I currently have a grid with 3 columns and would like to add two vertical lines to separate the elements. To achieve this, I have placed two span elements between the grid elements using css styling. .vertical_line { position: absolute; height: 100%; ...

htmlcss

Default modal overlay closure malfunctioning; encountering errors when manually managed through jQuery

A custom overlay has been designed and implemented. <div class="overlay modal" id="11"> <div class="background-overlay"></div> <div class="description"> <div class="hidden-xs"> <img src=' ...

javascriptjqueryhtmlcsstwitter-bootstrap