JSFiddle - React, Tailwind, and code Playground

by NickU

HTML

<div class="text-container">
  Your long text goes here. It's expected to wrap to multiple lines based on the container's width.
</div>

CSS

.text-container {
  position: relative;
  padding-left: 20px; /* Adjust as needed */
}

.text-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 20px; /* Match the padding-left value */
  height: 100%;
  background-color: transparent; /* Adjust or remove as needed */
}

JavaScript

function floatToStringWithCommasV1(nStr) {
    nStr += '';
    var x = nStr.split('.');
    var x1 = x[0];
    var x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
        x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    return x1 + x2;
}

function formatNumberWithCommas(num) {
    const n = String(num),
          p = n.indexOf('.');
    return n.replace(
        /\d(?=(?:\d{3})+(?:\.|$))/g,
        (m, i) => p < 0 || i < p ? `${m},` : m
    );
}


function formatNumber2(number) {
    // Convert the number to a string to simplify manipulation
    let numStr = number.toString();
    // Find the position of the decimal point (if any)
    let decimalPos = numStr.indexOf('.');
    // If there's no decimal point, set decimalPos to the length of the string
    if (decimalPos === -1) decimalPos = numStr.length;

    // Initialize an empty string to build the output
    let output = "";
    // Counter for inserting commas every three digits
    let commaCounter = 0;

    // Iterate through the number string in reverse for the whole number part
    for (let i = decimalPos - 1; i >= 0; i--) {
        output = numStr[i] + output; // Prepend the current digit
        if ((++commaCounter & 3) === 0) {
            output = "," + output;
        }
    }

    // Append the decimal part if it exists
    if (decimalPos !== numStr.length) {
        // Append the decimal part of the number to the output
        output += numStr.substring(decimalPos);
    }

    return output;
}


function formatNumberWithCommasForLoop(number) {
    // Convert the number to a string to simplify manipulation
    let numStr = number.toString();
    // Find the position of the decimal point (if any)
    let decimalPos = numStr.indexOf('.');
    // If there's no decimal point, set decimalPos to the length of the string
    if (decimalPos === -1) decimalPos = numStr.length;

    // Initialize an empty string to build the output
    let output = "";
    //...