Showing the content from the div elements in paragraph format

I am encountering an issue with displaying sentences from a database. Each sentence is printed inside its own div, and I want these divs to be shown back-to-back as in a paragraph. The problem arises when a sentence is too long, causing it to drop down to the next line even though there is space in the previous line. Check out this example on JSFiddle

<div class="paragraph">
   <div class="col>It is a long established fact</div>
   <div class="col>that a reader</div>
   <div class="col>will be distracted by the readable content of a page </div>
   <div class="col>when looking at its layout.</div>
</div>
htmlcssdrupaldrupal-8

Answer №1

When using display: inline-block, the expected behavior is for it to act like a block element. This means that if its contents exceed the available space, it will collapse to the next line.

To achieve the intended wrapping effect, you should use display: inline.

Check out the Updated JSFiddle here!

Below is a demonstration of the code snippet:

.paragraph {
  width:500px;
}

.paragraph .col-inline {
  display:inline;
} 

.paragraph .col-inline-block {
  display:inline-block;
} 
<h3>Before</h3>

<div class="paragraph">
  <div class="col-inline-block">It is a long established fact</div>
  <div class="col-inline-block">that a reader</div>
  <div class="col-inline-block">will be distracted by the readable content of a page </div>
  <div class="col-inline-block">when looking at its layout.</div>
</div>

<h3>After</h3>

<div class="paragraph">
  <div class="col-inline">It is a long established fact</div>
  <div class="col-inline">that a reader</div>
  <div class="col-inline">will be distracted by the readable content of a page </div>
  <div class="col-inline">when looking at its layout.</div>
</div>

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

Can the orientation of the card reveal be customized in Materializecss?

Exploring the card-reveal feature in the materializecss framework on this page: https://codepen.io/JP_juniordeveloperaki/pen/YXRyvZ with official documentation located at: In my project, I've rearranged the <div class="card-content"> to display ...

javascriptcssmaterialize

Verification of user input in open-text fields

After conducting extensive research on form validation in PHP, I realized that most tutorials focus on validating specific fields such as names, emails, or dates using regex. However, I am facing a challenge when it comes to validating free-form fields lik ...

phphtmlvalidationsecurityhtmlspecialchars

Creating a ToggleButton in C#Is a Togglebutton the

I am trying to create a togglebutton for a website with Microsoft Visual Studio and am not sure if this would be the correct code to apply. I am working in C#, so the button is going to be generated in C# (and a bit of jquery) code and eventually styled in ...

c#jquerycsstogglebutton

Dropdown element with PrimeNG adorned with a span

I am trying to create a simple form with text inputs and dropdowns. I have successfully implemented the textInput, but I am struggling with the dropdowns. Below is the code that I have so far: <div class="p-grid p-dir-col p-offset-2"> ...

htmlcssangularprimeng

Is it possible to have a div automatically scroll when hovered over, while also hiding the scroll bar specifically for that div?

Is there a way to autoscroll a specific element onmouseover or via an image map while also hiding the scrollbars for that div? I seem to be struggling with this task despite weeks of learning javascript and not being able to find the right solution online. ...

javascripthtmlonmouseoverautoscroll

What is causing my mobile version not to resize and adjust to fit the screen properly?

Currently utilizing Bootstrap 4 along with the viewport meta tag, %meta{:content => "width=device-width, initial-scale=1, shrink-to-fit=no", :name => "viewport"}/ Even after hiding all images with .hidden-xs-up, the display on Chrome mobile appear ...

csstwitter-bootstrapresponsive-design

Tips on eliminating the "other..." choice from the HTML color picker?

https://i.sstatic.net/73PuH.png Is there a way to remove the "Other..." button from this code snippet? This is the HTML code I am working with: The purpose of this code is to change the color of text by selecting colors from a dropdown menu. However, I o ...

javascripthtmlcss

When trying to rotate CSS elements, the @media query does not revert back to its original state

I've been struggling for a week trying to figure out why my media query isn't working properly. Even after all that time, the image still won't rotate when the screen size hits 1028 pixels. The image is set on a red background of my website ...

cssbootstrap-4

Tips to avoid the page from scrolling to the top when the menu is opened

Whenever a user taps the menu button on the page, a full-page menu opens. However, there is an issue - the main content page automatically scrolls to the top. Can you provide suggestions on how to prevent this from happening? I have already looked into a s ...

javascripthtmlcss

Difficulty maintaining hover state on menu while navigating to submenu on an HTML page

I successfully implemented a side menu that displays the submenu when hovering over menu items. However, I am encountering two issues: 1. When I hover over a menu item and the submenu appears, the hover state of the menu item disappears. I would like the m ...

htmlcssmenusubmenu

Is storing text in data-content and utilizing bootstrap-popover.js compatible?

Is it possible to display HTML content in a popover using ? How reliable is it to store text in data-content? Can we expect it to function properly across all browsers? ...

phpjavascripthtmlcsstwitter-bootstrap

How to retrieve the width of a document using jQuery?

Having a strange issue with determining the document width using $(document).width() during $(window).load and $(window).resize. The problem arises when the browser is initially full screen and then resized to a narrower width, causing content to require ...

javascriptjqueryhtmlcss

Having trouble uploading an image URL into a Vue component?

I'm currently facing an issue while creating a Vue tag component, as I am unable to pass the source to the template html <card aposter="assets\images\poster.png" aname="a title"> </card> JavaScript Vue ...

javascripthtmlvue.jsvue-componentvue-props

Manage the sequence in which the various paths of an SVG element are displayed

Searching for a way to display an image in HTML with a rounded dashed border? Take a look at the example below: https://i.sstatic.net/YrCZS.png The number of dashes and their colors can be controlled, similar to what you see in WhatsApp's status tab ...

javascripthtmlcsssvg

inject the HTML content into the <div> container

Snippet: https://jsfiddle.net/x9ghz1ko/ (Includes notes.) In my HTML file, there are two distinct sections: <section class="desktop_only"> and <section class="mobile_only">. The challenge lies in positioning a JavaScript sc ...

javascripthtml

Deselect a CheckBox along with its corresponding label using VueJS

I am currently working on unchecking a checkbox that is already checked using its label in VueJs. DEMO: new Vue({ el: '#app', data: { checkedNames: [], checkedName: true }, methods: { uncheck: function() { this.check ...

htmlcheckboxvue.jsvuejs2state

Tips for retrieving the selected option from a dropdown menu

I have a dropdown menu with checkboxes that can be selected using SumoSelect. Here is the markup for the dropdown menu: <select multiple="multiple" name="somename" id="uq" class="select"> <option value="volvo">Volvo</option> <o ...

javascriptjqueryhtmlcsssumoselect.js

Automatically updating markers on Google Maps v3

I'm utilizing the capabilities of Google Maps V3 to showcase various pins. My goal is to update these markers periodically without interfering with the current location or zoom level on the map. I aim for the markers to refresh every x seconds. How c ...

jqueryhtmlajax

Users are directed to various pages based on their specific roles

I am currently working on implementing a simple authorization system using an array to simulate a database. Let's say I have an array with information about two individuals: const users = [{ info: 'First person', login: &apos ...

htmlnode.jsformsexpressaction

Produce an HTML document containing both images and text through a Python script, all without the need for servers

How do I create HTML with images and text, utilizing a template and CSS, in Python? While there are similar inquiries on platforms like stackoverflow (for example: Q1, Q2, Q3), the proposed solutions might seem excessive to some, such as requiring servers ...

pythonhtmlcssdjango