To achieve this effect, you can use the CSS property text-align:justify along with a clever trick. Here's how it can be done:

div{
  background-color:gold;
  text-align:justify;
}

span{
  background-color:red;
  width:100%;
  height:1em;
  display:inline-block;
}

<div>
  Lorem ipsum dolor sit amet
  <span> </span>
</div>

The key is to insert an element after the text that simulates a long word. This fake word is actually a span element with display:inline-block and width:100%.

In the provided example, the fake word is styled in red with a height of 1em, but the hack will still work without these specific styles.

According to Mark, using text-align:justify; is the most straightforward approach. But when dealing with short text, this may not produce the desired effect. The jQuery script below adjusts the text to fill the width of its container.

The script calculates spacing for each character and applies the appropriate letter-spacing to ensure the text expands to fit the container's width.

If the text exceeds the container's width, it will flow onto multiple lines, and text-align:justify; will be used to align the text properly.

Check out this demonstration:

$.fn.stretch_text = function(){
    var element        = $(this),
        containerWidth = element.width(),
        text           = element.html(),
        oneLine        = $('<span class="stretch_it">' + text + '</span>'),
        charCount      = element.text().length,
        spacePerChar   = containerWidth/charCount,
        textWidth;
    
    element.html(oneLine);
    textWidth = oneLine.width();
    
    if (textWidth < containerWidth){
        var charWidth     = textWidth/charCount,
            letterSpacing  = spacePerChar - charWidth + (spacePerChar - charWidth)/charCount ; 
  
        oneLine.css({'letter-spacing': letterSpacing});
    } else {
        oneLine.contents().unwrap();
        element.addClass('justify');
    }
};


$(document).ready(function () {
    $('.stretch').each(function(){
        $(this).stretch_text();
    });
});

p { width:300px; padding: 10px 0;background:gold;}
a{text-decoration:none;}

.stretch_it{ white-space: nowrap; }
.justify{ text-align:justify; }

.one{font-size:10px;}
.two{font-size:20px;}
.three{font-size:30px;}
.four{font-size:40px;}
.arial{font-family:arial;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="stretch one">Stretch me</p>
<p class="stretch two">Stretch me</p>
<p class="stretch three">Stretch <a href="#">link</a></p>
<p class="stretch two">I am too long, and I would look unappealing if displayed on a single line. Let me expand to multiple lines and justify me.</p>
<p class="stretch arial one">Stretch me</p>
<p class="stretch arial three">Stretch me</p>
<p class="stretch arial four">Stretch me</p>
<p class="arial two">Don't stretch me</p>

View JsFiddle Demo

A simpler approach using HTML and CSS is to implement the flexbox method. This method ensures immediate responsiveness, though it's important to note that SEO may not detect it if used as an h1.

HTML:

<div class="container">
<div>H</div>
<div>e</div>
<div>l</div>
<div>l</div>
<div>o</div>
<div>&nbsp</div>
<div>W</div>
<div>o</div>
<div>r</div>
<div>l</div>
<div>d</div>

CSS:

.container{
  width: 100%;
  text-align: center;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  border: 1px solid black;
}

Access jsfiddle example here

Perhaps this solution might be beneficial:

text-align:justify;

After much experimentation, I have discovered a clever solution for short lines of text that does not require any additional JavaScript or tags. It simply involves the use of one CSS class.

.stretch{ 
  /* Setting the width to 5rem */
  width: 5rem;
  /* Ensuring only one line is displayed */
  height: 1rem;
  
  text-align: justify; 
}
.stretch:after{
    /* Creating the illusion of stretching the word */
    content: '';
    width: 100%;
    display: inline-block; 
}

<div class="stretch">Hello</div>
<div class="stretch">Hi there</div>

Joining the festivities a little tardy, but if you're looking for a simplistic CSS approach, consider utilizing flexbox:

h1.stretch {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

<h1 class="stretch">
  <span>F</span>
  <span>o</span>
  <span>o</span>
  <span>B</span>
  <span>a</span>
  <span>r</span>
</h1>

Uncertain if enclosing each letter in a span (any element will suffice) will impact SEO, but it's likely that search engines will remove tags from the innerHTML of elements used for critical markup like headings (Any SEO gurus out there to validate?)

While some of the solutions mentioned above are effective, they involve wrapping the text with numerous child div elements which can result in a significant amount of excess code.
To ensure that the content inside the div remains clean, I have utilized JavaScript to achieve this.

   const words = document.querySelector(".words");
words.innerHTML = words.innerText.split("").map(e => !e.trim() ? "<div>&nbsp</div>" : `<div>${e}</div>`).join("");

.words {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}

<div class="words">This is the demo text</div>

APRIL 2018 If you happen to come across this question at a later date...

I was exploring how to achieve what the original poster inquired about using just one word, and I managed to find a solution that worked:

1. Utilize a <span> element and apply the following CSS:

span { letter-spacing: 0px; display:block}

2. Upon loading, determine the width of the span with jQuery: let width = $('span').width();

3. Find out the length of the span's text: let length = $('span').length;

4. Restore the span's width to match the container: $('span').css({'width','100%'});

5. Obtain the NEW width of the span (or use the container's width): let con = $('span').width();

6. Calculate and apply the appropriate letter spacing to fill the container:

$('span').css({'letter-spacing':(con-width)/length})

This method can be adapted to utilize plain JavaScript and is effective with various font styles, including non-monospaced fonts.

Continuing to chip away at the edges of this issue, a combination of wener's solution for stretching short text lines and another suggestion about using a real element eliminates the need for a :after pseudo class.

By replacing with an actual element placed after the target element, you can achieve the same justification effect:

header {
  background-color: #ace;
  text-align: justify;
}

.hack {
  display: inline-block;
  width: 100%;
}

<header>
  <div>
    A line of text to justify
    <div class="hack"></div>
  </div>
</header>

This method allows for implementation in React using style objects:

const style = {
  backgroundColor: '#ace',
  textAlign: 'justify'
};

const hack = {
  display: 'inline-block',
  width: '100%'
};

const example = (
  <header style={ style }>
    <div>
      A line of words to stretch
      <div style={ hack } />
    </div>
  </header>
);

ReactDOM.render(example, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

While inherently messy and makeshift, further adjustments are needed to address the container’s excess height: either fixed height or negative margins, relative positioning with overlapping elements, or matching the container background with the page background to disguise intentional space.

It seems to me that the solution you are seeking is related to scaling.

To enhance your font display with a visually appealing resolution, consider utilizing JavaScript to expand it to fit the designated container using CSS transforms:

transform: scale(1.05);

The advantage of this approach is that your text will consistently adjust to fit the space, though there may be an issue where it becomes too small for readability.

Just remember to ensure that the element you are adjusting for size has absolute positioning:

position: absolute;

If you're looking to control the layout of your text, my custom lineclamp module can help you achieve that. By setting a maximum number of lines or height for your text, it automatically adjusts the font size and trims the text to fit within these parameters.

import LineClamp from "//unpkg.com/@tvanc/lineclamp/dist/esm.min.js";

const clamp = new LineClamp(document.querySelector("#elementToClamp"), {
  useSoftClamp: true,
  maxFontSize: 10000, // Set a high max font size
  maxLines: 1
});

// Use .apply() to apply the clamp now
// Use .watch() to re-apply if content changes or window resizes
clamp.apply().watch();

Check out a working example here: https://codepen.io/tvanc/pen/BaNmVXm

The original poster mentioned letter spacing in their question. In a subsequent comment, they clarified that it could also be about font size instead of just letter spacing.

If you're looking to align the content justify and center only the last line, you can achieve this by using the following CSS:

text-align: justify;
text-align-last: center;

Here's an example of how it can be done:

.custom-justify{
       text-align: justify;
       text-align-last: center;
       padding: 0 10px 0 10px;
    }

<div class="custom-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis elementum bibendum. Cras pellentesque sed augue nec lacinia. Duis at eros vel lorem cursus laoreet ac vel justo. Maecenas ornare, ligula ut porttitor sollicitudin, turpis urna auctor ipsum, a consectetur felis nibh vel est. Nullam id lorem sit amet magna mollis iaculis eu vitae mauris. Morbi tempor ut eros ut vulputate. Quisque eget odio velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed posuere enim tellus, ut vestibulum libero dapibus ac. Nulla bibendum sapien non luctus vehicula. Aenean feugiat neque nunc, in fermentum augue posuere vel. Maecenas vitae diam in diam aliquet aliquam.<div>