Eliminate the gap between spans when wrapping words

I am facing a challenge with displaying text and an icon together in a div. The requirement is for the icon to always be positioned right next to the text, even when the text wraps due to limited space.

Various solutions have been attempted, but they all result in a gap between the text and the icon when the text wraps:

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

The desired outcome looks like this:

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

<div style="width: 200px;">
  <div style="display: flex;">
      <span>Erforderliche Gesamtsumme</span>
      <span>🚀</span>
  </div>
</div>

If you have any ideas on how to solve this issue using HTML/CSS only (no JS), I would greatly appreciate it. Various attempts including CSS Grid, display: inline-block, and different flex properties have not yielded successful results so far.

htmlcssflexbox

Answer â„–1

To adjust the spacing around the icon, utilize properties like padding and margin

span {
  width: min-content;
}
<div style="width: 200px;">
  <div style="display: flex;">
      <span>Total Required Amount</span>
      <span>🚀</span>
  </div>
</div>

Answer â„–2

To achieve this, you need to utilize the flex attribute in your spans: The higher the value, the more space it occupies.

<div style="width: 200px;">
  <div style="display: flex;">
    <span style="flex:3;">Total Required Amount</span>
      <span style="flex:2;">🚀</span>
  </div>
</div>

Hope this helps you ;)

Answer â„–3

-- Utilize the white-space property to eliminate any unnecessary spacing.

<div style="width: 300px; white-space: nowrap;">
  <div style="display: flex;">
      <span>Total Required Amount</span>
      <span>🌟</span>
  </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

Flexbox - Consistent height image columns

I'm working on a basic flexbox layout that looks something like this: html,body { margin:0; padding:0; } body { height:100%; width:100%; } .panel-grid { -webkit-align-items: flex-start; ...

htmlcssflexbox

The Jquery Addclass function is not functioning properly

I have been struggling with this code as it seems to not be working in any browser, including IE, Chrome, and Firefox. I suspect that the system should add a class, so I checked the DOM using Chrome's console. I did see the class being added, but ther ...

jquerycssjquery-animateaddclass

What methods are available for identifying non-operational pointer-events?

According to this resource, Opera 12 does not support pointer-events, causing issues with my website. Interestingly, they do support the property in CSS but don't seem to implement it correctly. Modernizr's feature detection doesn't help in ...

javascriptcssoperamodernizrpointer-events

Configuring a background logo in WordPress using the Redux framework

I am attempting to integrate a "Logo upload" theme option using Redux framework, but I encountered an issue due to the logo being set up through a stylesheet in my HTML template. How can I configure this logo using an uploader? As a newcomer to WordPress a ...

phpcsswordpressframeworksredux-framework

Using PHP to automatically suggest options when selecting elements from a MySQL table

My project involves creating a basic application for sending confirmation emails. I have a MySQL table that includes 4 columns: id, user_email, user_name, and user_track. The form on the app has a selectbox displaying all the stored user_email entries an ...

phphtmlmysql

Showcasing Information Using AngularJS from a Json Array

My goal is to present data from a JSON array in a table using the code below. However, all the data is currently being shown in one row instead of each record appearing on separate rows with alternating colors - grey for even rows and white for odd rows. I ...

javascriptcssjsonangularjs

How to bind clickable labels to a model using a radio button in .NET Core?

Trying to create a radio button list in asp.net core that is bound to a model while also having clickable unique labels associated with each option. Currently, here is the code snippet: <fieldset> <div> <span> ...

htmlasp.net.netlabel

Having trouble locating elements with Selenium in Java?

I've been struggling to locate a particular WebElement using Selenium's API. I attempted to use a wildcard to capture all elements on the page and then iterated through them, but I'm still unable to locate the desired element. Could it possi ...

javahtmlseleniumweb

Activate the popup for sharing or bookmarking by clicking on a regular link

I am currently utilizing a Share/Bookmark script: <div class="singles-right"> <a href="#" class="bookmark"></a> <script type="text/javascript" src="http://static.addinto.com/ai/ai2_bkmk.js"></script> <a href="#" clas ...

javascripthtml

The background hue concealing the shadow of another box

I am facing an issue with my table styling where I want to apply a box-shadow effect when hovering over a row. However, despite setting the z-index accordingly, the background color of the td elements ends up covering the box-shadow, resulting in the hover ...

htmlcssz-indexbox-shadow

What is the best way to dynamically call a different PHP file each day for an entire year?

As a PHP novice, my goal is to integrate a daily meditation feature that corresponds to the current day. For example, on January 1st, I would like to display content from 1_1.php, and on the following days, it should load 1_2.php, 1_3.php, continuing unti ...

phpjqueryhtml

Attempting to open and display the contents of a text file (.txt) within a modal dialog box upon clicking a button

I am attempting to develop a modal that will appear when the user clicks on a specific button. The goal is for this modal to showcase text retrieved from a separate file stored on the server. My aim is to show this text within a dialog box modal. So far, ...

javascripthtmlcssnode.js

Incorrect legend colors in Highcharts pie chart

[![enter image description here][1]][1] There seems to be an issue with the Pie-Chart where the Slice color and the Legend color do not match when the color is set using className. This problem does not occur with some other charts. If you look at the co ...

csschartshighcharts

How to modify checkbox and textarea values in a MySQL database with Jquery

In my MySQL database, I have a textarea and three checkboxes. By default, the textarea value is null and the checkbox values are set to zero (0). When I enter text into the textarea, I am able to update the text value in my database. However, I am facing ...

phpjqueryhtmlmysql

Combining color and typography classes using Tailwind merge is currently not supported

In my custom styling setup, I have created a custom color class called text-green (colors) and a custom typography class called text-card-highlight (utilities), which includes font size and weight attributes. However, when using tailwind-merge, only one of ...

cssnext.jstailwind-css

Using "overflow-x: hidden" is ineffective on mobile devices

I'm facing an issue where the CSS property overflow-x: hidden is not working on mobile devices. Here is a snippet of my HTML code: <div class="topbar"> <div class="navbar-brand float-left"> <a href="#"><img src="asset ...

cssbootstrap-4overflow

The hamburger menu in Bootstrap 5 is not displaying properly on mobile screens and appears to be unstable

Although the desktop screen is working fine, I am encountering 2 issues on the mobile screen: Check out this JSFiddle Demo: https://jsfiddle.net/uyvdqL9s/ On the mobile screen, the hamburger menu appears in the center instead of on the right along with t ...

htmlcsstwitter-bootstrapbootstrap-5

The reason I am unable to extract information from the elements within the <ul> tag

I am currently attempting to extract reviews data from booking.com that is contained within the <ul> tag with the class attribute set to "review_list". There are a total of 10 reviews, each of which is inside an <li> element with the class attr ...

htmlxpath

Is there a way to gradually reveal an element as I scroll to a specific position?

If the window top position is about 100px from the bottom, I want to create a fading in/out effect for the element overlay. Check out this image Any ideas on how to achieve this? .section-card{ position: relative; height: 500px; line-heigh ...

javascriptjqueryhtmlcss

Exploring the Various Textures within the CANVAS 2D Context

Exploring new techniques for filling the canvas, I am currently trying to add texture to an object similar to the blobs from the blob example (http://www.blobsallad.se/). The challenge is that the current example is utilizing the 2D context without webGL i ...

htmlcanvaswebgl