When the text exceeds the space available, it will automatically flow into a new column in lower

Is there a way to make text content flow into a column that appears next to it when the window height is decreased? Essentially, I am looking for a solution where the text can smoothly transition to a dynamically created column.

Are there any jQuery plugins or other tools available that can help achieve this effect?

I recently encountered an issue while working on a horizontally scrolling website which has been causing me frustration for the past month. It seems like my mind was clouded by this problem and prevented me from conducting proper research.

I came across treesaver.js , which seemed promising as it worked well in IE9. However, I found that it would not even load in IE8 (confirmed through IEtester), so there may be some inaccuracies in its compatibility. My only gripe with treesaver is the constant re-loading whenever the window is resized, although this is a minor annoyance.
Ideally, I would prefer a solution using just CSS without the need for a JavaScript plugin. However, the diverse range of browsers with their own quirks in the market often leads me to rely on JavaScript as a first step.

Answer №1

The information you are seeking is currently part of a W3C candidate recommendation.

For more details, visit: http://www.w3.org/TR/css3-multicol/

To see it in action, visit: http://www.quirksmode.org/css/multicolumn.html

Unfortunately, this feature is not supported by IE 8 even in standards mode. While I don't have access to test on IE 9, it may not be feasible to require it for public sites at this time.

Answer №2

Be sure to check out the stylish text effects on

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

Filter object in Angular to remove empty values

Below are the specific data sets: $scope.icons = [{ "id": 1, "bonuses": [ { "id": 1, "name": "Rob", "amount": 10, "foreman": 1, "percA": 1, "percB": 0 }, { "id": 2, "name": "Mark", "amount": 20, "foreman": 1, "percA": 1, "percB": 0 }, ] }, { ...

What is the method to retrieve a randomly generated class from an id?

Is there a way to target elements that have the class "my_class" within the element with the id of "info_id"? It's important to note that these elements may also have another class, which I'm not interested in selecting. <div id="info_id"> ...

Utilizing Moment.js fromnow functionality with Vue.js and Laravel framework

Currently utilizing Laravel with Vue for my project Vue.http.headers.common['X-CSRF-TOKEN'] = $("#token").attr("value"); new Vue({ el: '#notificationMenu', data: { patients: [] }, ...

Tips for effectively utilizing Vuelidate to display errors selectively after the user has completed input:

I have implemented a form using Bootstrap-Vue with some Vuelidation code applied to it. <b-form @submit.prevent="onSubmit"> <input type="hidden" name="_token" :value="csrf" /> <transition-group name="fade"> <b-form ...

Tips for transferring input data to a static HTML page

After successfully identifying a value in a table using jQuery, I am faced with the challenge of passing it to a static HTML page. How can this transition be achieved smoothly? $('.gobutton').bind('click', function(){ var value = $( ...

The issue of for loops malfunctioning in JavaScript when using a variable declared in Node.js and passed to Jade

Currently, I am delving into the world of node.js and JADE but seem to be encountering a challenge when it comes to implementing a for loop within a JavaScript block in a jade file. My approach involves experimenting with a basic code where I pass an array ...

Creating a Facebook link widget similar to Grooveshark: A Step-by-Step Guide

Recently, I shared a Grooveshark link on Facebook (like http://grooveshark.com/s/Toothpaste+Kisses/3gGocy?src=5) and to my surprise, the link appeared to be normal at first. However, once clicked, it magically transformed into a Flash widget like this. The ...

Tips for loading an MVC Partial View while maintaining the functionality of Angular JS

Looking for best practices on loading MVC partial views while maintaining Angular JS functionality. Everything runs smoothly with Angular JS after I render the layout, but when I try to load partial views within the layout, Angular JS stops working in th ...

Enhance your user interface by adding a tooltip above a button

I am currently working on creating a button that can copy content from a variable into the clipboard using TypeScript and Material-UI. Here is what I have tried: const [copySuccess, setCopySuccess] = useState(''); const copyToClipBoard = async ( ...

Incorrect JavaScript switch case usage

Once again, I find myself with a question regarding JavaScript. This one seems to be an easy fix, but for some reason, I just can't seem to figure out what went wrong: I have a textbox and a button. When the button is clicked, the value should be pas ...

Highcharts - resolving cross-browser e.Offset discrepancies in mouse event detection on charts

I need to determine if the mouseup event is inside the chart and display the coordinates of the point. The code works in Chrome but not in Firefox due to the lack of the event.offset property. jQuery(chart.container).mouseup(function (event) { eoff ...

Adding CSS styles to an HTML generic control such as <UL> and <LI> in an ASP.NET application

I am struggling to apply CSS to an HTML generic control like <UL> and <LI> with the attribute runat="server" in ASP.NET. Specifically, I need to target the <li> element located within a master page from a content page. Once I locate thi ...

Export data table from HTML to Excel successfully implemented with C#

I am currently working on an Umbraco website and developing a custom plugin for the backend that allows users to export an Excel worksheet from an HTML table. In order to achieve this functionality, I am utilizing AngularJS along with a C# controller. Belo ...

Return true in an incorrect manner

Coderbyte Challenge 7 Need help with a function that checks if every letter in the string is bounded by '+' signs. The code provided seems to be returning incorrect results - it should return false for the input string below as 'k' is ...

Ways to apply attributes to specific images using a JQuery array

I'm struggling to add attributes to multiple images using a jQuery array. Can anyone provide some assistance? <div id="result"> <img src="Image1" width="300"/> <img src="Image2" width="300"/> <img src="Image3" width="300"/> ...

AngularJS allows you to dynamically disable a button based on a value in an array

I have an array containing letters from A to Z and I want to create a list of buttons using them. $scope.alphabet = "abcdefghijklmnopqrstuvwxyz".split(""); I also have another array: $scope.uniqChar = ['a', ' ...

Iterating through an array using a for loop in JavaScript and JQuery

Encountering an issue. I've successfully used the code below to populate a jquery datatable with short string arrays (around 7 elements each). It seemed like a good approach for creating the table initially and worked reasonably well at first. Howeve ...

Troubleshooting: Issue with Updating Prototype Ajax Function

I am currently utilizing Prototype within the pylons framework and attempting to execute an Ajax call. Below is the structure of my html: <form method="POST" action = "javascript:void(0)" onsubmit = "new Ajax.Updater('graph','/saffron_m ...

display:table causing issues in Internet Explorer

I am trying to achieve a layout where table cells are aligned horizontally similar to the ones demonstrated on this page. Despite following the provided instructions and even copying the css and markup exactly, I am facing an issue with IE 8 rendering my ...

"Exploring In-Depth Data Visualization: A Guide to Navigating Charts

It was shocking to me how scarce the information on this subject is. I have a ChartJS pie chart that I would like to delve deeper into by clicking on a slice of the pie. Do you have any suggestions on how to achieve this? ...