What is the best way to condense a flex item that contains a span with wrapped text?

I am uncertain if it is achievable, but I am attempting to determine if I can reduce the size of a flex item around a span with text wrapping.

Currently, I am trying to eliminate whitespace to the right of the text in the second row.

body {
  height: 75%;
  margin: 0;
  padding: 0;
}
body > div {
  min-height: 55px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  border-bottom: 1px solid black;
  width: 225px;
}
body > div > div {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  border-right: 1px solid black;
}
body > div > div span {
  font-size: 21px;
}
body > div > div:nth-child(1) {
  -webkit-box-flex: 0;
  -webkit-flex: 0 1 auto;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
}
<div>
  <div><span>Some text regular</span></div>
  <div>👻</div>
</div>
<div>
  <div><span>howdoishrinkthis flexitemtotext</span></div>
  <div>👻</div>
</div>
<div>
  <div><span>Some text regular</span></div>
  <div>👻</div>
</div>

htmlcssflexboxword-wrap

Answer â„–1

When you set the value of flex-basis to zero, a flexible element will shrink down to its minimum size, allowing it to fit with the text content and causing the text to wrap as needed:

body > div {
  min-height: 55px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  border-bottom: 1px solid black;
  width: 225px;
}
body > div > div {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  border-right: 1px solid black;
}
body > div > div span {
  font-size: 21px;
}
body > div > div:nth-child(1) {
  -webkit-box-flex: 0;
  -webkit-flex: 0 1 0;
      -ms-flex: 0 1 0;
          flex: 0 1 0;
}
<div>
  <div><span>Some text regular</span></div>
  <div>👻</div>
</div>
<div>
  <div><span>howdoishrinkthis flexitemtotext</span></div>
  <div>👻</div>
</div>

Answer â„–2

This method may not be flawless, but it successfully aligns the flex item with the text, even when dealing with lengthy words. It achieves this by:

  1. Applying a float property to the text container (the span)
  2. Breaking long words and potentially hyphenating them in browsers that support hyphenation

body {
  height: 75%;
  margin: 0;
  padding: 0;
}
body > div {
  min-height: 55px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  border-bottom: 1px solid black;
  width: 225px;
}
body > div > div {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  border-right: 1px solid black;
}
body > div > div span {
  float: left;
  font-size: 21px;
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  word-break: break-word;

  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}
body > div > div:nth-child(1) {
  -webkit-box-flex: 0;
  -webkit-flex: 0 1 auto;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
}
<div>
  <div><span>Some text regular</span></div>
  <div>👻</div>
</div>
<div>
  <div><span>howdoishrinkthis flexitemtotextevenlonger and more and more and mroe text</span></div>
  <div>👻</div>
</div>
<div>
  <div><span>Some text regular asdf asdf</span></div>
  <div>👻</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

What is the best location to insert JavaScript from a website template into a Blazor project?

I recently set up a new Blazor WebAssembly project in Visual Studio 2019 and wanted to integrate a website template. After downloading the template, I am unsure where to place the accompanying JavaScript files. Currently, I have placed them within my inde ...

javascripthtmlcssblazorblazor-webassembly

Using jQuery AJAX to Transfer Data to a PHP Script

There is a div element with a data-id attribute. The goal is to use jQuery to detect when this div is clicked and then send or store the corresponding data-id value in a PHP file. However, the code provided raises an error when trying to obtain the data-id ...

phpjqueryhtmlajax

Create a fresh array with the handlebars helper and incorporate it into the HTML

I have a handlebars helper function that sorts an array of objects and returns a new array. I want to use this new array to populate my HTML. Here is my handlebars template: FoodGroup: [ { name: "vegetables", foods: [ { ...

javascripthtmlhandlebars.js

Avoiding the <br> tag in list items with TinyMCE

I am currently using tinyMCE and I needed to enable the "force_br_newlines: true" option. Without this setting, if I press the "Enter" key twice and check the source code, I only see one <br> tag. However, when I set the option to TRUE, it creates a ...

javascripthtmlcsstinymce

Unable to function in simplistic html/php code, 'Require' fails to operate as intended

I am facing an issue while attempting to import a header.php file into my index.php file. For some reason, it is not working as expected. header.php: <!DOCTYPE html> <html> <head></head> <body> <header> & ...

phphtmlrequire

Dynamic menu plugin for JQuery

I am still new to jQuery and currently learning how to efficiently use it in website development. I am currently working on implementing a responsive navigation plugin that I came across online. However, I have encountered an issue with the plugin where th ...

javascriptjqueryhtmlpluginsdrop-down-menu

Leveraging Ajax for establishing session and displaying outputs

Trying my best to make this work with AJAX, but it's a new concept for me. So bear with me as I figure this out... I've posted a couple of questions about resolving the issue at hand and we've made progress. However, a new challenge has pre ...

javascriptphpjqueryhtmlajax

Choose an element at random

I am trying to figure out how to select all div elements with the same class of "dot" under a parent div in JavaScript. Here is an example structure: <div id="dots"> <div class="dot"> . </div> <div class="dot"> . </div> ...

javascripthtmlcss

What impact does changing the Device Language have on a heading?

At the top of an html page, I have the word "Color" in a heading. If a user's device is set to British English, I would like the text to automatically switch to "Colour". What is the best way to accomplish this with minimal Javascript? ...

javascripthtmlcssheading

Endless scrolling for looped sections

Imagine this scenario: for($a=0;$a<100;$a++){ echo '<div class="post">'; //content here echo '</div>'; } Is there a way to display the first 10 posts initially and then add a button to load more posts when t ...

phpjqueryhtmlajax

Can you conceal the label while also displaying the placeholder?

Within my form, I am using the following code: <div id="zipcode-label" class="f-label"><label for="zipcode" class="required">Zip code</label></div> <div id="first-element" class="f-element"><input type="tel" class='ro ...

csshtml

Iterate through an array and update the innerHTML content for each value contained in the array

Looking to replace a specific word that keeps appearing on my website, I experimented with various functions and stumbled upon this method that seems to work: document.getElementsByClassName("label")[0].innerHTML = document.getElementsByClassName ...

javascripthtml

Aligning text to the left center

I am looking to center left-aligned text in the yellow box (txtbox). The current look is like this: and I want it to appear like this: HTML: <div class="content container small"> <div class="txtbox"> ...

htmlcss

Adjusting the opacity of the background image in the section - focus solely on the background

This section is what I'm working on. <section ID="Cover"> <div id="searchEngine">hello</div> </section> I am trying to achieve a fade in/out effect specifically for the background image of the Cover section. T ...

javascriptjqueryhtmlcss

Inconsistencies in spacing between shapes bordering an SVG Circle using D3.js are not consistent across platforms

After creating a SVG circle and surrounding it with rectangles, I am now attempting to draw a group of 2 rectangles. The alignment of the rectangle combo can either be center-facing or outside-facing, depending on the height of the rectangle. However, I am ...

javascripthtmlcssd3.jssvg

PHP - What is the reason for the output being a multi-dimensional array?

Hey there, I'm currently working with this code and for some reason, the variable records2 is returning a multi-dimensional array. Can anyone help me figure out why this is happening? I actually need it to be a simple, single dimension array. functi ...

phphtmlmultidimensional-array

Reduce whitespace when resizing

Is there a way to adjust the content to fill in the margin space when the browser is resized smaller? http://jsfiddle.net/denWG/62/ Html: <div class="jp-sleek jp-jplayer jp-audio"> <div class="jp-gui"> <div class="jp-controls jp-ico ...

htmlcssflexbox

Include some text before and after the bar element

I am attempting to insert text preceding and succeeding the bar, as depicted in the image below. <div class="container"> <div class="progress progress-info progress-striped"> <div id="storage-component" class="bar" style="wi ...

javascriptjqueryhtmlcss

What is the best way to add a new li element to a ul list that shares the same class name

Is there a way to add a new li element to the ul on the right side? Each card comes with a ul and a form. After submitting the form, I want to append a new li to the corresponding ul. Each ul has a class of .topics. However, the new li is currently being ...

javascripthtmljquerycsscss-selectors

Images on WordPress are automatically resized for optimal display

I'm facing a puzzling issue with my company's wordpress website. Despite setting the dimensions of a 200x140 image correctly in the HTML code, it seems to be scaling up and taking over the entire page. I've double-checked everything, from th ...

htmlwordpress