A guide to structuring HTML elements to group multiple lines

My goal is to create a layout that can accommodate 2 lines of text like this:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, |
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, |

When I adjust my browser window size, the current display looks like this:

Lorem ipsum dolor sit amet, |
consectetuer adipiscing elit|
,                           |
Lorem ipsum dolor sit amet, |
consectetuer adipiscing elit|
,                           |

However, this is the layout I am aiming for:

Lorem ipsum dolor sit amet, |
Lorem ipsum dolor sit amet, |
consectetuer adipiscing elit|
consectetuer adipiscing elit|
,                           |
,                           |

I would appreciate advice on how to achieve the desired layout. Thank you.

htmlcss

Answer №1

If you plan on including more than 2 elements, make sure to adjust the calculations for the top and line-height values accordingly.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>

body { /* parent element */
  position: relative;
}

p {
  margin: 0;
  line-height: 2.5em; /* top * number of elements */
  margin-bottom: 1.25em; /* equivalent to top */
}

p + p {
  top: 1.25em; /* 1em + space from previous line */
  position: absolute;
}

Answer №2

To achieve the desired effect, use HTML and CSS to create columns of words by changing their order and grouping them differently. This ensures that the text is displayed in the format you want.

Here's an example:

HTML:

<div>Hello<br/>Hello</div>
<div>world<br/>world</div>
<div>how<br/>how</div>
<div>are<br/>are</div>
<div>you<br/>you</div>

CSS:

div {
    display: inline-block;
}

Check out this jsFiddle example

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

What could be causing my JavaScript to malfunction after clicking on anchor links?

My website's JavaScript has a bug where clicking the links in the static header causes scrolling to become buggy and unbearable. What can I do to fix this issue? Thank you in advance. Here is my code: $(window).load(function(){ $(windo ...

javascriptjqueryhtmlcssjscript

Using jQuery to trigger a CSS transformation with a click event

I am facing a challenge where I need to modify an already transforming element when it is clicked. However, the current code does not trigger any action upon clicking. While utilizing jquery-ui partially resolves the issue by bringing back the element to ...

jquerycss

Sending a Form using jQuery and Ajax

Struggling with getting my register page to post the data to the database using Ajax and jQuery. I'm new to ajax and can't quite figure out how to do this insert. Any advice on how to achieve this would be much appreciated. I'm not even sure ...

javascriptphpjqueryhtmlajax

How to align the Bootstrap 4 button toolbar horizontally in an Angular project

I'm struggling to center the button toolbar horizontally on my webpage. This is what I have so far: <div class="row"> <div class="col-sm-6 mx-auto"> <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups"& ...

htmlcssangularbootstrap-4centering

Dynamic content container with customizable sidebar

I have a query that remains unanswered in my research on various CSS layout options. Hence, I decided to share it here. My ongoing project involves a fluid/fixed two-column design. The main content is placed on the left side while the sidebar resides on t ...

htmlcsslayoutpositioningfluid

Should conditions be applied inside SX Props in a Material UI Component?

My goal is to dynamically change the UI of the Navigation Component based on the current pathname in history. I have created a function named UI that calls another function, BoxPadding, based on the location. The BoxPadding function takes a parameter for ...

javascriptcssreactjsmaterial-uisx

JavaScript does not function properly with dynamically loaded content

Trying to load the page content using the JQuery load() method. See below for the code snippet: $(window).ready(function() { $('#content').load('views/login.html'); }); .mdl-layout { align-items: center; justify-content: center ...

javascriptjqueryhtmlcssajax

Bootstrap: the arrangement of columns in a horizontal stack

I have a nested row with 3 columns that are stacking vertically instead of horizontally. I've tried solutions from other sources like stackoverflow but none seem to be working. <div class="jumbotron mainBar"> <div class="container ma ...

htmlcsstwitter-bootstrap

Should the text underneath the image be placed above the rest of the images?

In the process of developing my game, I encountered a challenge where text needs to be dragged under specific images. To achieve this, I envision creating tabs below the images for the text to be dragged onto. My initial approach involved wrapping each im ...

htmlcssimagetabs

Restrict the character count in the input field according to its width

Is there a way to restrict the number of characters in an input field based on its width? I have a dynamic input field with varying widths and I would like users to be able to type without their text extending outside of the input boundary. Using maxLeng ...

javascripthtmlcss

Drawing the canvas is taking place prior to the image being fully loaded in JavaScript

Currently, I am in the process of creating a collage using images that are all sized at 174x174 pixels. The images are stored on my server, and while my program can locate them successfully, it requires me to click the "save image" button twice for them to ...

javascripthtml

Issue with WordPress Body Class not being implemented

Attempting to create templates for the WordPress theme Flexform, I have successfully created a specific page with a custom header. Surprisingly, there was no need to include a body_class call as it was already present: <body <?php body_class($page_c ...

phpcsswordpressstylesheet

Emphasize the selected item using the same style as the one that was dragged or clicked

Imagine a scenario where there are numerous items, each labeled with a specific class. There may be multiple items sharing the same class. If a user clicks or drags an item, I want all other items with the same class to be highlighted as well. I am looki ...

htmlcss

Capture all div elements from the table and store them in an array

Check out this code snippet that includes draggable divs and a droppable table: http://jsbin.com/exetuk/1/edit When dragging a div to the table, copies of the div with the class .draggable appear. I am looking to create an array with divs from the table ...

javascriptjqueryhtmlcssarrays

By utilizing Angular's @output decorator, data can be passed from child components to their parent counterparts

I have a situation where I am passing data from a child component to a parent component, and I need to automatically check if the data is empty or has a value. This code snippet is from my login.component.ts - child TypeScript file: @Output() update = ne ...

htmlangulartypescript

What are the steps to ensure the effective functioning of my checkbox filter?

Currently, my product list is dynamically created using jQuery. I now need to implement filtering based on attributes such as color, size, and price. I found some code that filters the list items by their classes, which worked perfectly for someone else. ...

javascriptjqueryhtmljsoncheckbox

Learn the process of extracting HTML content from a webserver response and displaying a specific tag value in a combobox within a desktop application using VB.NET

I am currently attempting to retrieve data from a URL using HttpWebRequest/HttpWebResponse in VB.NET desktop application. The response I receive is displaying the entire HTML content in a message box. Now, my objective is to extract a specific tag (TD tag) ...

htmlparsing

"Enhance your website with the ability to dynamically load and display

I am facing a little issue and need suggestions because I am struggling with inserting data into an HTML page using the append jQuery function and AJAX request. Within my HTML block, under ul elements, there are some images that I directly insert into the ...

jqueryhtmlajaxappendinstagram

Adjust the row height of a datatable in JSF 2.0

I'm struggling to change the row height of my JSF datatable. Here's what I have: <h:dataTable value="#{myBean.myValue}" rowClasses="dt_row" var="o"> </h:dataTable> I've defined a css class called dt_ ...

cssjsf

Show selected options from 2 dropdown menus on a separate page

I need to showcase the selected options from 2 dropdown menus on a different page. Code: <form action="home/show" method="post"> <p>Vendor:</p> <select id="v" name="v"> <% @vendors.each do |vendor| %> <option ...

javascriptphpjqueryhtmlruby-on-rails