Creating flex items that mimic the fluidity of text

Question

Creating flex items that mimic the fluidity of text

Is there a way to achieve fluid text behavior for flex items like in the following example:

.container{
        display: flex;
        flex-wrap: wrap;
        max-width: 200px;
        background: red;
      }

      div:not(.container){
        word-break: break-word;
        background:blue;
        color: white;
        font-weight: 600;
      }

<div class="container">
        <div>Looooooooooooooooooong text looooooooong</div>
        <div>Smooll</div>
        <div>Smoll</div>
      </div>

Is it possible for the items to behave like fluid text? For example, have "Smooll" appear on the same row as the end of "looooong text," as if they were just normal text rather than being in a flex container. The number of items is dynamic. Thank you for taking the time to read this!

Edit:

I need to use flex to remove an element (dynamically chosen) based on an additional class on the specific item. The desired end result is illustrated here: https://i.sstatic.net/c6Y1z.png

html css flexbox

Answer 1

Answer №1

One technique I’ve observed in handling cases similar to this is to enclose every character within <span> tags and apply white-space: break-spaces to achieve a layout resembling regular text flow using flexbox.

You can then group multiple characters that belong together under the same “unit” by assigning them a specific class. For instance:

<style>
div {
  display: flex;
  flex-wrap: wrap;
}

span {
  display: block;
  white-space: break-spaces;
}
</style>

<div>
  <span class="part1">L</span>
  <span class="part1">o</span>
  <span class="part1">o</span>
  ...
  <span class="part1">n</span>
  <span class="part1">g</span>
  <span> </span>
  <span class="part2">S</span>
  <span class="part2">m</span>
  <span class="part2">o</span>
  <span class="part2">l</span>
</div>

Given the current details available, perhaps a strategy like this could be effective?

Another option to explore is wrapping words in <span> tags instead of individual characters and using the column-gap CSS property for spacing.

Answer 2

One technique I’ve observed in handling cases similar to this is to enclose every character within <span> tags and apply white-space: break-spaces to achieve a layout resembling regular text flow using flexbox.

You can then group multiple characters that belong together under the same “unit” by assigning them a specific class. For instance:

<style>
div {
  display: flex;
  flex-wrap: wrap;
}

span {
  display: block;
  white-space: break-spaces;
}
</style>

<div>
  <span class="part1">L</span>
  <span class="part1">o</span>
  <span class="part1">o</span>
  ...
  <span class="part1">n</span>
  <span class="part1">g</span>
  <span> </span>
  <span class="part2">S</span>
  <span class="part2">m</span>
  <span class="part2">o</span>
  <span class="part2">l</span>
</div>

Given the current details available, perhaps a strategy like this could be effective?

Another option to explore is wrapping words in <span> tags instead of individual characters and using the column-gap CSS property for spacing.

Creating flex items that mimic the fluidity of text

Answer №1

Similar questions

Executing a post request asynchronously and storing the retrieved data into a variable

Javascript code requires server to have default text field values

When Google Chrome encounters two variables or functions with the same name, how does it respond?

Place a div at the bottom of a flexbox while adding some padding around it

What is the reason for the lack of letter-spacing between a nested inline element and the next character that follows?

Tips for adjusting animations using @media queries

Implementing a jQuery function to trigger window resize on window load

Unable to retrieve the sum total of all product items and display it in the designated text element

deployJava.js injects a new <embed> element into the header section of the webpage

Adjust the background color of alternate elements

Tips on designing checkboxes with CSS

javascript passing a window object as an argument to a function

Animating Divs with jQuery to Expand their Size

Connecting components in React using their IDs on the same page

Leveraging AJAX for implementing PHP scripts

Divide the webpage into four equal sections, each showcasing distinct information sourced from the database

Transfer information from the client to the server using AJAX and PHP by

How do I input text into a Google Doc using an XPATH or element that is difficult to manipulate?

What is the method for inserting form control values into a QueryString within HTML code?

Updating the color of tick marks on checkboxes