Insert an Ellipsis into the Middle of a String

The text-overflow: ellipsis; CSS property is one of those commands that's tricky to get right the first time, but once you've figured out the correct overflow and white-space options to go alongside it then it's easy to remember.

Occasionally we'll come across a scenario where we'd prefer to add an ellipsis somewhere in the middle of the text. Displaying long URL's on-screen is a good example of this where it might be easier if we can draw particular attention to the domain name at the start and the and the targeted file at the end without breaking the user flow.

This isn't possible in CSS alone, and even if it were then we wouldn't have much control over where the ellipsis gets added.

I was able to fashion a simplistic solution to this using jQuery, although the approaches would be broadly similar regardless of your chosen flavour of scripting language.

if (displayText.Length > 40) {
    var start = displayText.Substring(0, displayText.Length - 25);
    var end = displayText.Substring(displayText.Length - 25);
    $targetObject = $`
       <div class='valueContainer middleEllipsis' title='{displayText}'>
          <div class='start'>{start}</div>
          <div class='end'>{end}</div>
       </div>`;
}
else {
    // fallback to a standard approach
    $targetObject = $`
        <div class='valueContainer' 
             style='overflow:none;text-overflow:ellipsis;white-space:nowrap;'>
            {displayText}
        </div>`;
}

The approach here, is to take your text value and split it at an appropriate juncture; we can then render both within separate elements and use a little CSS to ensure that everything flows properly even if the screen is too wide to require an ellipsis.

.middleEllipsis {
    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: 0; 
}