Stop inline elements from wrapping onto the next line within their container

Check out this example http://jsfiddle.net/jaWjB/1/

The issue with the line break occurs between the second image and its label. I am looking to have any <span class="group"> element act as an incompressible block, allowing line breaks to occur between blocks but not within them.

This would result in the layout of the above fiddle appearing as:

[img]label
[img]label

as opposed to:

[img]label[img]
label

If there is sufficient width available, it should display like this:

[img]label[img]label

Currently, I can only achieve this using tables. Is there another method to accomplish this?

htmlcss

Answer №1

Insert this snippet into your stylesheet

Adjust the formatting to align with adequate width

p {
width: 10ex;
border: thin solid blue;
display:inline-block;
}
​span{
display:inline-block;
}​

Answer №3

To achieve the desired layout, simply include display:inline-block in your CSS for the .group selector. Here is an example: http://jsfiddle.net/abc123/4/

Answer №4

If you want to add a line break after each span element, consider using the span:after selector. Check out this demo for an elegant solution to the issue.

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

Is it possible to log out a user in JavaScript by simply removing cookies?

Hey there, I currently have a node.js server running in the background which handles user login processes (I didn't create the backend code). app.use(function (req, res, next) { var nodeSSPI = require('node-sspi'); var nodeSSPIObj = n ...

javascripthtmlnode.jscookies

Tips for effectively showcasing div elements

https://jsfiddle.net/qz8hL574/1/ for (var key in table) { if (table.hasOwnProperty(key)) { $('<div class="element"></div>').appendTo('#list'); document.getElementsByClassName("element")[key].innerHTML = ...

javascriptcssflexbox

What is the best way to dismiss a custom popover when clicking outside of it?

I'm currently developing a Cordova application. I have opted to utilize Vue.js and jQuery for bindings and scripts, while also taking on the responsibility of designing the user interface myself. While I've managed to implement page transitions a ...

javascriptjqueryhtmlcssvuejs2

Adjusting the target of the anchor dynamically

I have a WordPress theme with a built-in widget that allows you to insert social media links into sidebars or headers. All the social media links are contained within a div with a unique class called social-links. I want to add target="_blank" to all anc ...

jqueryhtml

Customizing hover color with tailwind CSS

How can I change the color of an icon on mouseover using Tailwind CSS? I have tried to go from this https://i.sstatic.net/ObW6C.png to this https://i.sstatic.net/Tagp3.png, but it's not working. .btn { @apply agt-h-10 agt-w-10 agt-bg-zinc-100 agt- ...

cssangulartailwind-cssstenciljs

Tips for updating CSS styles for multiple innerHTML elements using a JavaScript for loop

<div id="test"></div> <script type="text/javascript"> window.names=["jin kazama", "nina williams"]; window.values=[25, 37]; len=names.length for (var i = 0; i < len; i++) { document.getElementById('test').innerHTML+ ...

javascriptjqueryhtmlcss

Enhance the appearance of the standard black rectangle displaying the messages "No video source" or "No video permissions"

Is there a way to change the styling of the video element that appears as a black rectangle with a strikethrough play button when the user is prompted for permission on Safari? Does it have a specific ID, class, or tag that can be targeted? I'm curre ...

ioscsssafariquaggajs

Tips for adjusting the text color of input fields while scrolling down

I am currently working on my website which features a search box at the top of every page in white color. I am interested in changing the color of the search box to match the background color of each individual page. Each page has its own unique background ...

javascripthtmlcsswordpress

When generating dynamic text boxes, a new area is always allocated for each new set of dynamic text boxes that are created

<html> <head> <script src="jquery-1.10.2.min.js"></script> <script> function AddingTextBoxes() { var NumOfText=$("#NumOfTextBoxes").val(); $('#NewlyCreatedSe ...

html

What is the best way to reposition a container within another container using bootstrap?

I am new to working with Bootstrap and I am attempting to shift a container to the left within another container, but so far have been unsuccessful. In this image, you can see my attempt at moving the div containing a checkbox to the left I attempted to ...

htmlcssbootstrap-4bootstrap-5

Having difficulty pinpointing and deleting an added element using jQuery or JavaScript

My current task involves: Fetching input from a form field and adding the data to a div called option-badges Each badge in the div has a X button for removing the item if necessary The issue at hand: I am facing difficulty in removing the newly appended ...

javascripthtmljquerybootstrap-4

Tips for adjusting the border-bottom line in real-time as text is selected from a dropdown menu

$('#select').on('change', function() { name = $('#select :selected').val(); //some code here }); . bdr-txtline { border-bottom: 1px solid black; } <div class="container"> <div class="row"> <div ...

jqueryhtmltwitter-bootstrapcss

Retrieve the content of each div element based on its text value

In this particular structure, I have: <table id="thetable"> <tr> <td> <div> <div>some text</div> <div> <div></div> ...

javascriptjqueryhtml

Problem with word-spacing in Safari versions 6.1 and 7.0 when using text-align:center

When I try to center align text in Safari 6.1/7.0 and add word-spacing, the text is centered as if the space between words is not included in the width calculation. For example, consider this CSS: div { width:300px; border: 1px solid #CCC; } h1 { ...

csssafariwebkitosx-mavericksword-spacing

Unable to conceal the innerHTML once the error has been rectified

My error messages are displayed using innerHTML. How can I make them disappear once the error is corrected? Currently, they stay on, even after the error is fixed. I tried resetting them at the top of the script but it didn't work. Link to JSfiddle ...

javascripthtml

Switch up the background image of the <li> element when the <a> tag is clicked

html: <ul> <li id="Co" class="libgc" ><b>CO</b></li> <li id="NSCO" class="libgc active"><span> <a href="#NSale.php" target="homeFrame" class="aclass">NSale</a></span></li> </ul ...

jqueryhtmlcssanchorbackground-image

What is the best way to save a JavaScript array in HTML5 local storage?

I am looking for a way to store an array of inputs using the local storage feature of HTML5. Currently, I am able to add weight inputs to the array, but they disappear once I refresh the page. Can anyone assist me with this? <!DOCTYPE html> <html ...

javascriptarrayshtmllocal-storage

Utilizing Bootstrap 3 to eliminate the blue border surrounding the Contact Button

Recently, I integrated Bootstrap 3 into my website and encountered an issue. After selecting the Contact button and closing the popup window, it remains highlighted which is not desirable. https://i.sstatic.net/pzfKy.png I want to modify my CSS file so t ...

csstwitter-bootstraptwitter-bootstrap-3bootstrap-modal

Personalizing the hamburger icon in Bootstrap 4.0

I want to modify the color of the three lines as well as the border around the icon using CSS, but I'm unsure which tags to target. CSS: .navbar-toggler .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox=& ...

csshtmlbootstrap-4

The navigation bar extends beyond the page's width

Currently, I am working on a website that was started by a former colleague. One issue I have noticed is that when the browser window's resolution reaches 768px or lower, the navigation transforms into a drop-down menu that appears wider than the page ...

jqueryhtmlcssnavbarnav