CSS - Utilizing Flexbox for creating inline lists that adjust based on text length

I have a set of radio buttons arranged like this:

I want to utilize flexbox to display them horizontally when there is sufficient space, similar to this:

However, the current setup uses a min-width media query for layout breaking, which can lead to text overflow:

.radio-btn-label {
  width: 100%;
  height: 40px;
}

@media only screen and (min-width: 900px) {
  .radio-btn-group {
    display: flex;
}

Is there a way to add constraints on either the individual flex items or on the container itself to prevent text overflow in the flex layout?

Currently, the HTML structure looks like this:

<div>
  <label class="radio-btn-label">
    <input type="radio">
    <div class="label-text">Foo</div>
  </label>
</div>

The .label-text class has styling with borders and background for the list element. This allows the use of 

input[type='radio']:checked + .label-text
selector for different styling when the button is selected.

htmlcssflexbox

Answer №1

CSS alone cannot determine if an element is overflowing. However, by combining various techniques, you can achieve some useful results. Check out this guide on Truncating Strings with Ellipsis and learn how to Fill the Space in the Last Row with Flexbox.

Give it a try by resizing. View the Codepen here

/* **************
   Quick Reset
************** */
html {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}
body {
  background-color: #3da7b4;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row nowrap;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  padding: 2rem;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
/* **********
   Style
********** */
.Fieldset {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  border: 1px solid #017480;
}
.Fieldset__legend {
  opacity: 0.99;
}
.Fieldset__title {
  font-family: 'Open Sans', sans-serif;
  font-size: 2rem;
  font-size: calc(2vmin + 2vmax);
  color: #017480;
}
.Fieldset__content {
  opacity: 0.99;
}
.Fieldset__input-group {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row wrap;
      -ms-flex-flow: row wrap;
          flex-flow: row wrap;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.Fieldset__label {
  opacity: 0.99;
}
.FluidLabel {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  min-width: 160px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row nowrap;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: #d8d8d8;
  border: 1px solid #979797;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.FluidLabel__input {
  margin: 10px;
  -webkit-flex-shrink: 1;
      -ms-flex-negative: 1;
          flex-shrink: 1;
}
.FluidLabel__input:checked + .FluidLabel__text {
  color: #017480;
}
.FluidLabel__text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
<fieldset class="Fieldset">
  <legend class="Fieldset__legend">
    <h1 class="Fieldset__title">CSS - Flexbox - inline list when the text fits</h1>
  </legend>
  <div class="Fieldset__content">
    <p class="Fieldset__input-group">
      <label class="Fieldset__label FluidLabel">
        <input type="radio" name="name" class="FluidLabel__input"/><span class="FluidLabel__text">Label</span>
      </label>
      <label class="Fieldset__label FluidLabel">
        <input type="radio" name="name" class="FluidLabel__input"/><span class="FluidLabel__text">LabelLong</span>
      </label>
      <label class="Fieldset__label FluidLabel">
        <input type="radio" name="name" class="FluidLabel__input"/><span class="FluidLabel__text">LabelLoooooooong</span>
      </label>
      <label class="Fieldset__label FluidLabel">
        <input type="radio" name="name" class="FluidLabel__input"/><span class="FluidLabel__text">LabelLoooooooong</span>
      </label>
      <label class="Fieldset__label FluidLabel">
        <input type="radio" name="name" class="FluidLabel__input"/><span class="FluidLabel__text">LabelLoooooooong</span>
      </label>
    </p>
  </div>
</fieldset>

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

Determine the current position of the cursor within a contenteditable division

I came across this code snippet on a forum to determine the cursor position in a contenteditable div, but unfortunately it consistently returns 0. Here is the function responsible for retrieving the cursor position: new function($) { $.fn.getCursorPo ...

jqueryhtmlcontenteditablecaretcursor-position

What is the proper location for inserting image copy code within my codebase?

I encountered an issue with using this code: copy('imgurl', 'images/covers/file.jpeg'); The code successfully copies an image URL to a file on my website when placed in a PHP page alone, but it fails to work within my actual code. He ...

phphtmlajaxdatabase

Different Line Thickness in Dropdown Menu

Is there a way to adjust line heights in CSS within a drop down menu? I have attempted to change the font sizes of each element, but the new font size does not seem to take effect once an option is selected. Any suggestions would be greatly appreciated! & ...

javascripthtmlcssselectdrop-down-menu

Execute location.replace when the "control" key is pressed

document.addEventListener('keydown', (event) => { var name = event.key; var code = event.code; if (name === 'Control') { location.replace(classroom.google.com) } if (event.ctrlKey) { alert(`Combinatio ...

javascripthtmlcss

Issue with iPhone CSS displaying differently on mobile devices

The CSS design does not display correctly on iPhone devices in real-life testing, even though it appears fine on browsers with mobile view emulators. Interestingly, the design also looks great on Android phones but encounters issues specifically on iPhones ...

javascripthtmlcsstwitter-bootstrap

Methods for concealing the title and date when printing web content using JavaScript

When utilizing the window.print method to print out a specific screen, I encountered an issue. I need to hide the date in the top left corner of the image as well as the title (not the big heading) which has been intentionally blurred. I've come acro ...

javascriptcssvue.js

Is it possible to store multiple keys in HTML local storage?

Is there a way to store multiple keys to local storage without overwriting the previous ones when multiple people take a survey and refresh? Could they be grouped by userID or sorted in any way? $('form').submit(function() { $('input, ...

javascriptjqueryhtmllocal-storage

Efficient Django Template: Accurate Conversion of Values through Dictionary Searching

I have an object with an attribute that has specific choices defined in its class: class StashURLJobRequest(models.Model): STATUS_CHOICES = ((0,"Requested"),(1,"Done"),(2,"Failed")) url = models.URLField() created = models.DateTimeField(auto_n ...

pythoncssdjango

Using php variable to pass data to jquery and dynamically populate content in jquery dialog

I am facing challenges trying to dynamically display MySQL/PHP query data in a jQuery dialog. Essentially, I have an HTML table with MySQL results. Each table row has an icon next to its result inside an anchor tag with the corresponding MySQL ID. echo &a ...

javascriptphpjqueryhtmlmysql

Crop and resize a portion of an image using CSS

Is there a way to display just part of an image on a webpage and scale that specific area either larger or smaller using CSS? A common method is by using the following code: $("#myDiv").css({ width: 100, height: 100, background: "url('myurl.jpg ...

htmlcssimage-scalingimage-extraction

Creating sitemaps for multi domain websites using NextJS

We are implementing a next-sitemap package to generate sitemaps for our Next.js pages located in the /pages directory. For pages that come from the CMS, we use server-sitemap.xml with SSR. Despite having 6 different domains, we manage them within a single ...

javascripthtmlreactjsnext.jsseo

CSS regression testing through version control systems and continuous integration

Is there a tool that integrates with CI systems and VCS like Git to automatically assign regression test results to individual commits? Ideally, this tool would provide a concise summary on a main page showing passed/failed numbers for each commit, with th ...

csscontinuous-integrationcontinuous-deploymentregression-testing

Customizing SwiperJS to display portion of slides on both ends

I need some assistance with my SwiperJS implementation to replace existing sliders on my website. The goal is to have variable-width slides, showing a landscape slide in the center with a glimpse of the preceding and following slides on each side. If it&ap ...

javascriptjquerycsssliderswiper.js

Scroll Bar Menu (User-Controlled)

I'm looking for any libraries out there that can replicate or provide a similar horizontal scrolling menu to that of espn.com's homepage. I'm relatively new to jquery and feeling a bit lost on where to begin. I did some searching on Google, ...

javascriptjquerycss

Is there a way to trigger the onclick event while dragging the div?

Exploring a Div: <div id="up" onmousedown="handleMouseDown('url(/scanToUserBox/img/cpt_subfunc_005_prev_p.png)', this)" onclick="changePage('up')"> </div> Upon clicking the div, the onmousedown event is trig ...

javascripthtmljsp

Tips for displaying diverse content in a DIV container when users click on various sections of an image

Apologies for the unclear title, but I'm struggling to explain my technical goal using jargon. The basic concept is this: there will be an image on the webpage, and when a user clicks on a specific area of the image, relevant information will appear ...

javascriptjqueryhtml

Convert the 'value' attribute in HTML into a clickable link

Is there a way to make the output value of an HTML input field into a clickable link? Right now, it appears as follows: <input type="email" class="form-control" name="contactEmail" value="<?php echo $row_rsContactD ...

javascriptphphtml

Tips for organizing JSON data from a multiselect form

I am currently working on a template driven form with a multiselect field named assets. My framework of choice is semantic UI. <div ngModelGroup="assets"> <div class="field"> <label for="resourceName">Assets</label ...

htmljsonangularangular2-template

Using JSON within HTML: A guide to sanitizing stringified objects

Is there a way to improve the readability of a string that looks like an object but is actually just a string? It currently does not look very nice and easy to read. Using JSON.parse doesn't work because not every element in the string meets the requi ...

htmljson

Creating visually appealing layouts with CSS floats and divs while ensuring responsiveness

As I work on bringing my vision to life, I'm experimenting with a mix of floats and divs, along with using a responsive image for the background and text. There's quite a bit involved in this process. 1. To start off, check out this example with ...

htmlcssresponsive-designcss-floatresponsive-images