After some thought, this is the solution I have come up with... It may be beneficial to tidy up the front portion of the second span...

CSS

#fileTitle span {
      white-space: nowrap;
      overflow: hidden;
      display:inline-block;
 }
#fileTitle span:first-child {
      width: 100px;
      text-overflow: ellipsis;
 }
#fileTitle span + span {
      width: 30px;
      direction:rtl;
      text-align:right;
 }

HTML

<div id="fileTitle">
    <span>Here is the title of my document.docx</span>
    <span>Here is the title of my document.docx</span>
</div>

http://jsfiddle.net/c8everqm/1/

Here's a helpful tip that I found effective:

<div style="width:100%;border:1px solid green;display:inline-flex;flex-wrap:nowrap;">
   <div style="flex: 0 1 content;text-overflow: ellipsis;overflow:hidden;white-space:nowrap;"> Here comes a very long sentence that is cut short for readability</div>
   <div style="flex: 1 0 content;white-space:nowrap;"> &nbsp;but remains flexible in layout</div>
</div>

Presented here is a dynamic solution utilizing flexbox, which adjusts according to the user resizing the browser window. One drawback is that the text following the ellipsis maintains a fixed size, preventing placement of the ellipsis at the exact center of the text.

CSS

.middleEllipsis {
    margin: 10px;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
}
.start {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 1;
}
.end {
    white-space: nowrap;
    flex-basis: content;
    flex-grow: 0;
    flex-shrink: 0;

}

HTML

<div class="middleEllipsis">
    <div class="start">This is a really long file name, really long really long really long</div><div class="end">file name.txt</div>
</div>

To observe the effect, adjust the size of the right-hand side boxes on jsfiddle:

https://jsfiddle.net/L9sy4dwa/1/

If you're open to using direction: rtl creatively, it's possible to position the ellipsis precisely in the middle of the text by tweaking your CSS:

.middleEllipsis {
    margin: 10px;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
}
.middleEllipsis > .start {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex-shrink: 1;
}
.middleEllipsis > .end {
    white-space: nowrap;
    flex-basis: content;
    flex-grow: 0;
    flex-shrink: 1;
    align: right;
    overflow: hidden;
    direction: rtl;
}

You can view an animated gif demonstrating this on https://i.sstatic.net/CgW24.gif.

Here's a jsfiddle showcasing this approach:

https://jsfiddle.net/b8seyre3/

After experimenting with various CSS solutions, I discovered a common issue – when the text is short, it would display as "short text short text" instead of just "short text". To address this, I decided to combine CSS with JavaScript.

In my JavaScript code (based on Jeremy Friesen's with some modifications), I created a function called shrinkString:

const shrinkString = (originStr, maxChars, trailingCharCount) => {
    let shrinkedStr = originStr;
    const shrinkedLength = maxChars - trailingCharCount - 3;
    if (originStr.length > shrinkedLength) {
      const front = originStr.substr(0, shrinkedLength);
      const mid = '...';
      const end = originStr.substr(-trailingCharCount);
      shrinkedStr = front + mid + end;
    }

    return shrinkedStr;
}

To implement this in HTML, I used the following code snippet:

<div>
  <h5>{shrinkString("can be very long of short text", 50, 15)}&nbsp;</h5>
</div>

For styling, I applied the necessary CSS properties to achieve the desired effect:

div {
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

I trust that this solution will prove helpful. Apologies for any formatting errors as this marks my debut answer on SO.

Here is a handy JavaScript function:

var cropWithExtension = function(inputString, maxLength, trailingCharCount) {
    var croppedString = inputString;

    if(inputString.length > maxLength){
        var start = inputString.substr(0, inputString.length - (maxLength - trailingCharCount - 3));
        var middle = "...";
        var end = inputString.substr(-trailingCharCount);

        croppedString = start + middle + end;
    }

    return croppedString;
}

var shortString = cropWithExtension("This is the big file.txt", 21, 6);

Input ---A gigantic text file named file.txt

To shorten the file name, you can use the following JavaScript code snippet:

Output ---A gigantic...file.txt

var selectedFileName = getItemSelected();//Input

$scope.referenceFileName =getItemSelected();

var len = selectedFileName.length;

if(len > 30){
 selectedFileName = selectedFileName.substr(0,15)+'... '+selectedFileName.substr(len-15,15);    
}

$scope.fileName = selectedFileName;

**

Note:

**Send the $scope.referenceFileName in the JSON object to the back end

$scope.fileName this will be used in the front-end

The approved solution is effective. One suggestion for enhancing Browser Compatibility would be to implement detection for truncation. Consider making the entire CSS conditional based on this.

const wrap = document.getElementById('filenameText');
  if (wrap.offsetWidth >= wrap.scrollWidth) {
    this.truncation = false;
  }

 <div
    :data-filetype="data-filetype"
    :class="[truncation && 'truncateFilenamClass']"
  >

After encountering issues with buggy and hard-to-maintain CSS solutions that required adding attributes or elements to separate text, I decided to create a straightforward JavaScript solution. By simply providing your text and the maximum length allowed, you can easily truncate the text in the middle.

const truncateMiddle = (text, maxCharacters) => {
  const txtLength = text.length;
  const txtLengthHalf = maxCharacters ? Math.round(maxCharacters / 2) : Math.round(txtLength / 2);
  return text.substring(0, (txtLengthHalf -1)).trim() + '...' + text.substring((txtLength - txtLengthHalf) + 2, txtLength).trim();
}

truncateMiddle('Once upon a time there was a little bunny', 10);

Returns: Once...nny

The only downside is that it may require additional functionality to be fully responsive.

Although CSS is effective, I believe using JavaScript can lead to more precise outcomes. Why? Because with JS, you have the ability to manipulate the number of initial and final text elements. You only need 2 lines of JavaScript code to trim a string based on your specifications:-

    let fileName=document.getElementById('fileName')
    fileName.innerHTML=fileName.innerHTML.substring(1, 10)+'...'+fileName.innerHTML.slice(-2)

 <div id="fileName"> This is the big name of my file.txt</div>

In addition, with JS, you can select the first n words instead of just the initial characters according to your preferences. Here is the JavaScript code for this functionality:

    let fileName=document.getElementById('fileName')
    let Words=fileName.innerHTML.split(" ")
    let i=0;
    fileName.innerHTML=''
    Words.forEach(e => {
        i++
        if(i<5)
        fileName.innerHTML+=e+' ' 
    });
    fileName.innerHTML+='...' 

 <div id="fileName"> This is the big name of my file.txt</div>