flex-wrap wraps entire text

I'm facing a challenge with wrapping multiple items in a container. I want the second label to fit as much as possible on the first line, with the remaining text continuing on the next line. What could be the solution here?

Desired Outcome:

https://i.sstatic.net/LRTbK.png

.container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
<div class='container'>
  <div class='content'>Label1 |</div>
  <div class='content'>Loooooooong long label</div>
</div>

Please note that the parent must have display: flex for this to work correctly. Thank you.

javascripthtmlcss

Answer №1

To achieve the desired result, it is not possible to do so within a container that has been styled with display: flex. However, even if you are unable to modify the CSS of the .container to remove the display: flex property, there may be a workaround by overriding it with a display: block rule later in your document. It's important to note that styles applied later will take precedence over earlier ones.

The key steps involved in solving this issue include styling the .content element with display: inline and word-break: break-all. This will allow the two labels to flow one after the other and break at line boundaries as needed.

/* ..... perhaps modifying this is not an option ..... */

.container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* ..... but consider adding this further down in your HTML structure ..... */

.container {
  display: block; /* overrides previous display:flex */
  width: 125px;
  max-width: 100%;
  border: 1px solid red;
}

.content {
  display: inline;
  word-break: break-all;
}
<div class='container'>
 <div class='content'>Label1 |</div>
 <div class='content'>Loooooooong long label</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

jQuery's resize() function is not functioning properly

I have a question about resizing my menu items using jQuery. Currently, I am successfully able to resize the list items when the page is reduced in size. However, when I try to increase the page size, the list items do not decrease accordingly. Is there a ...

jqueryhtmlresize

What is the process for creating a post using thymeleaf with spring 4 MVC that pulls data from a table?

I have a DataGrid located on the page reg_customers.html <tr th:each="listing : ${list}"> <td th:text="${listing.id}">1</td> <td th:text="${listing.ci}">1</td> <td th:text="${listing.division}">1</td& ...

javascriptjqueryajaxspring-mvcthymeleaf

HTML haphazard design

My goal was to design a page with an intriguing layout, as seen below. Click here for an example of the intended layout The issue I'm facing is determining the best method to achieve this. I am utilizing bootstrap, and here is what I have implement ...

jqueryhtmlcsstwitter-bootstrap

The concept of Ajax does not involve a function

I'm encountering an issue with my jQuery code when I try to input text into the designated area. Below is the snippet of my JavaScript: $(document).ready(function(){ $("#cif").keyup(function(){ var name = document.getElementById("cif").v ...

javascriptjqueryajaxcodeigniter

An effective method for linking a value from one ng-model to another is by identifying and matching a specific string

I have been tasked with binding a value to one model based on the content of another model when it contains a string that starts with "https". For instance, there are two text fields each associated with a different model. <input type="text" ng-model= ...

javascriptangularjsangular-ngmodel

Is jQuery Table a Suitable Replacement for GridView in an ASP.NET Web Application?

This web application utilizes SQL DB connections and web services to allow users to insert, edit, and delete database records. However, we are currently facing challenges in providing the required features for a dry run demo due to certain cosmetic limitat ...

c#javascriptjqueryasp.netgridview

Is there a way to transform a value into a time format using AngularJS?

I am having an issue with the Ionic Timepicker. When I choose a time, it returns values like 75600 (for example, when I select 09:00pm). How can I retrieve a human-readable string instead of an epoch timestamp? Below is the code snippet: $scope.timeP ...

javascripthtmlangularjstime

Why is it that I am having a hard time retrieving a particular ID from this array of IDs?

I'm utilizing a package from NPM called Twit in order to retrieve a list of IDs belonging to users who follow a specific individual on Twitter T.get('followers/ids', { screen_name: 'kanyewest' }, function (err, data, response) { ...

javascriptarraysnode.jsobjectindexing

Is my JavaScript coding accurate?

I'm working on extracting JSON data from my Rest API to display in my application. I'm wondering if the function renderUserState is being called, as the rest of my code seems to be functioning correctly. function testSubmit() { var card = ge ...

javascriptjsonajaxapi

The error message that keeps popping up is saying that it cannot access the property "username" as it is undefined

signup.js const SignupForm = () => { const [username, setUsername] = useState(""); const [password, setPassword] = useState(""); const handleSignup = () => { fetch("/signup", { method: "post", header ...

javascriptexpress

Using the `createReadStream` function in Node.js

After using fs.readFile(), I encountered this error: "FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - process out of memory" Given that fs.readFile() loads the entire file into memory before executing the callback, would it be better to switch to ...

javascriptnode.jsfilestreamreadfile

What is the best way to turn my rectangular shape into a diamond in React Native using CSS?

https://i.sstatic.net/S4LPu.png Hi there, I'm facing a challenge with a project where my client wants to implement this orange border in react native. Unfortunately, CSS is not my strong suit. Can anyone please help me figure out how to achieve this ...

javascriptcssreactjsreact-native

WordPress now features the ability to toggle both parent menu items when clicked, providing a more streamlined user experience

I am currently facing an issue with a menu structure, where parent menu items have submenus that need to toggle on click. However, I am encountering a problem where, upon placing the code inside a forEach loop, both submenus toggle instead of only togglin ...

javascriptwordpress

What is the best way to navigate to the next input field upon pressing the tab key in an Angular table?

In the Angular table, how can I make the cursor move to the next input field when the tab key is pressed? Essentially, when the tab key is pressed in a cell, I want the cursor to move to the next cell from left to right. For example, in the screenshot belo ...

javascriptangulartypescript

Tips for successfully passing an object with a list property in an ajax request

I have encountered a similar problem to This previous question, but I am struggling to implement the solutions provided. I am unsure of where to include the ModelBinder code mentioned in the responses, so I will explain my issue here. I am working with a s ...

javascriptc#jqueryasp.net-mvccart

Elevate the vertical dimension of a <ul> using a TAB

I'm currently working on developing a visually appealing page that will feature 4 tabs. I used https://codepen.io/axelaredz/pen/ipome for the tab navigation, which I think looks fantastic. However, I am facing an issue where I need each section under ...

htmlcsstabsnavigationheight

React / Express / MySQL - Best Practices for Managing MySQL Transactions

I'm currently working on a project that involves developing a React front-end with an Express back-end API that utilizes MySql. One of the challenges I am facing is determining where to handle MySql transactions in my project structure. The folder l ...

javascriptmysqlnode.jsreactjsexpress

Is It Possible for an HTML Page to Load Within an iframe?

Recently, I embedded an iframe link from a game hosted on Scirra onto my website. However, I noticed that the page automatically scrolls down to where the iframe is positioned once opened, which is quite annoying. Does anyone know how to resolve this iss ...

htmlcssiframeposition

Achieving Vertical Centering in Bootstrap: A Step-by-Step Guide

Creating a mobile-optimized website using bootstrap 4. Currently struggling to vertically center an element within the available space. The element consists of a title with fixed size, a message, and 2 buttons in a div. Need to ensure it is vertically cent ...

htmlcssbootstrap-4

Drift alongside a Division in HTML5

Struggling to make an Aside tag float alongside a Section tag using CSS. Here is the HTML: <div id="WholePage"> <section> <asp:ContentPlaceHolder ID="MainContentWindow" runat="server"> </asp:ContentPlaceHolder> ...

htmlcss-float