Avoiding the fontawesome icon within a Bootstrap button from being the only item to wrap to the next line

Explore a straightforward Bootstrap 4 button featuring a fontawesome icon. If this button is situated in a container that happens to be slightly smaller than its default width, the icon will shift to the next line.

body {
  padding: 20px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="72101d1d06010600130232465c475c41">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="58283728283d2a76322b186976696e7669">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4d2f2222393e393f2c3d0d796378637e">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">


<a href="#" class="btn btn-light">One two three <i class="fa fa-arrow-right ml-1"></i></a>

<p class="mt-2">
  When in a smaller container / window size:
</p>

<div class="mt-2" style="width: 140px;">
  <a href="#" class="btn btn-light">One two three <i class="fa fa-arrow-right ml-1"></i></a>
</div>

Is there any method to prevent just the icon from moving to a new line (as depicted below)? In other words, can we ensure that the last word wraps onto the next line along with the icon?

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

In my scenario, the solution of wrapping the last word and the icon within a span using white-space: nowrap; doesn't seem feasible:

<span style="white-space: nowrap;">three <i class="fa fa-arrow-right ml-1"></i></span>

Could a pure CSS approach accomplish this task? Placing a &nbsp; between the final word and the icon also does not yield the desired outcome.

htmlcssbootstrap-4font-awesomeline-breaks

Answer №1

Is it possible to achieve this using pure CSS?

I highly doubt it.

The best solution I can think of involves using a JavaScript workaround similar to the following code snippet:

document.querySelectorAll("i.fa-arrow-right").forEach(function (self) {
  var parent = self.parentNode;
  var words = self.previousSibling.nodeValue.split(/(?<=\s)/);
  var nobr = document.createElement("NOBR");

  parent.removeChild(self.previousSibling);
  parent.insertBefore(nobr, self);
  nobr.appendChild(document.createTextNode(words.pop()));
  nobr.appendChild(self);
  parent.insertBefore(document.createTextNode(words.join('')), nobr);
});
body {
  padding: 20px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a9cbc6c6dd === span id='16592766'>[encrypted]</span>@/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">

<a href="#" class="btn btn-light">One two three <i class="fa fa-arrow-right ml-1"></i></a>

<p class="mt-2">
  When in a smaller container / window size:
</p>

<div class="mt-2" style="width: 140px;">
  <a href="#" class="btn btn-light">One two three <i class="fa fa-arrow-right ml-1"></i></a>
</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

Instructions for using jQuery to replace the final <a> tag within a specific section

Here is a section that I am working with: <section class="breadCrumb"> <a href="/">Home</a> <span class="divider">&gt;</span> <a class="CMSBreadCrumbsLink" href="/SCCU.Stg/Events-Calendar.aspx">Events Calendar ...

javascriptjqueryhtml

Bringing elements into perfect harmony in Angular

Seeking guidance on HTML alignment using bootstrap for prebuilt components like buttons. Struggling with aligning divs and looking to learn more about grouping them together for proper alignment. Goal is to center elements on screen one above the other. ...

htmlcssangularangular-ui-bootstrap

Populate your HTML form with Bootstrap 4 Popover Styling

Currently in the process of upgrading from Bootstrap 3. I previously had a form within some popovers, but now it's broken with empty content. I can't figure out what has changed to cause this issue. The form is shown dynamically, but the problem ...

jqueryformsbootstrap-4popover

Personalize the color scheme of your HTML template

I recently downloaded a template from html5up.net, specifically the one located here. My intention was to add my own touch by changing the blue color to orange. I managed to do so by tweaking the main.css file and it worked like a charm. However, the res ...

htmlcss

Loading 3D models in Three.js from the cache

Every time my page reloads, the loader loads objects from the URL instead of cache. Is there a way to check if the resource is in cache and load it directly? Appreciate your help! ...

javascripthtmlthree.js

Screen JSON data by applying filters

In my current project, I am working on extracting data from a JSON file and presenting it to the user in a way that allows them to input values that match the expected data. My goal is to show different sections of the screen at different times. The initi ...

javascripthtmljsonknockout.js

How can I dynamically update the value of an ng-option based on the selection of another ng-option?

My application has 2 select option boxes. The first box contains a list of countries, and I want the second box to update its values based on the selection made in the first box. For instance, if I choose India from the first select box, the second select ...

javascriptangularjshtml

Tips for Implementing Input Validation in Your Code

I have been attempting to design a multi-form and have been struggling to add input validation. Specifically, I want to prevent the form from progressing to the next step if certain fields (such as name) are left empty. However, despite multiple attempts, ...

javascripthtmlcss

What is the best way to transfer a PHP variable to a separate PHP page based on its object ID for additional processing?

Currently, I am utilizing a PHP-generated link/button to transfer a variable to the destination page and then using $_GET[''] to retrieve this variable. The anchor tag script looks like this: echo "<a href='miniStat.php?pod=<?php echo ...

phphtmlbootstrap-4

Do jQuery and AJAX both support application/json content type in all web browsers?

I have been managing my ajax requests like this: @header("Content-Type: text/html; charset=".get_option('blog_charset')); and in the JavaScript: $.ajax(.... ... success: function(response){ var obj = eval('('+response+') ...

jqueryhtmlajaxjson

Troubleshooting: Sticky navigation menu shifts unexpectedly to the right upon sticking

Whenever the scroll bar on my website at travismorenz.com reaches the sticky menu, it slightly shifts the menu over a few pixels. This issue can be observed by scrolling down slowly and watching the menu. The sticky menu functionality is achieved using th ...

javascriptjqueryhtmlcss

Having difficulty inputting text into a text field using Selenium in Java

Here is a snippet of HTML code that I am working with: </td> <td valign=top bgcolor="#dcdcdc" class="camp"> <script>Oblog()</script>ID <br> <input ty ...

htmlselenium-webdriverhidden-field

Erase every picture contained within the element

<div id="uniqueidhere"> <span> <span><img src="image1link"></img></span> <span><img src="image2link"></img></span> <span><img src="image3link"></img></span> <span>&l ...

javascriptjqueryhtml

Invoking functions within a jQuery extension

I've come up with this code to define the instance of my plugin: $.fn.someplugin = function(opts) { $(document).on('click', '.option-1', function() { alert(1); }); }; To make my plugin work, I utilize code similar to this ...

javascriptjqueryhtmleventsplugins

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){ w ...

htmlcssflexbox

Clicking on components that are stacked on top of each

I am facing an issue with two React arrow function components stacked on top of each other using absolute positioning. Both components have onClick attributes, but I want only the one on top to be clickable. Is there a workaround for this? Here is a simpl ...

cssreactjsreact-nativematerial-ui

Ensure that elements with a higher z-index prevent lower elements from triggering their onclick events

Is it possible to assign an onclick event to a specific 'layer' without triggering the same action for elements on top of it? I'm looking for a way to achieve this, any suggestions? ...

javascripthtmlcssonclickz-index

SASS loop encountering issue when trying to adjust hsla lightness, error is due to $lightness value being treated as a string instead of a number for 'hsla'

I'm attempting to create a loop that gradually decreases the lightness value of hsla over a set number of iterations. However, when I execute the loop, I encounter an error stating $lightness: "96.77419" is not a number forhsla'`. Can someone ple ...

csssass

The Bootstrap form fails to function properly on mobile devices

On my Bootstrap form, everything works fine when entering data on the desktop version. However, I am facing an issue with the mobile version where I cannot input any information into the fields. The fields are unresponsive and not allowing me to enter an ...

htmlformstwitter-bootstrap

Retrieve and showcase data stored in a SQL Server database on a browser using ASP.NET

I have a challenge with displaying blog content stored in my database, which includes raw HTML tags and image tags. My approach of using HTML Encode before inserting data into the database and then Decode while retrieving it has not produced the desired ou ...

c#asp.netsql-serverhtml