37

I have a big filename that I'm cropping using css text-overflow: ellipsis.

<style>
   #fileName {
      width: 100px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
  }
</style>
<div id="fileName"> This is the big name of my file.txt</div>

So I have this output

This is the bi...

But I want to preserve the file extension and have something like this

This is the... le.txt

Is it possible only using CSS?

Since my files are always txt, I've tried to use text-overflow: string, but it looks like it only works on Firefox:

 text-overflow: '*.txt';
2
  • 1
    No. The only way to do something like that is through Javascript. Commented Jan 2, 2015 at 17:43
  • 5
    could you just put the file extension in a different container?
    – andrew
    Commented Jan 2, 2015 at 17:44

12 Answers 12

53

Here is a clean CSS solution using the data-* attribute and two ::after pseudo-elements. I also added an optional hover and show all text (the #fileName::after pseudo element needs to be removed when the full text is shown).

Example 1

#fileName {
  position: relative;
  width: 100px;
}

#fileName p {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

#fileName:after {
  content: attr(data-filetype);
  position: absolute;
  left: 100%;
  top: 0;
}


/*Show on hover*/

#fileName:hover {
  width: auto
}

#fileName:hover:after {
  display: none;
}
<div id="fileName" data-filetype="txt">
  <p>This is the big name of my file.txt</p>
</div>


Going further — hiding the appended filetype when the filename is short

The #fileName p::after is given a background color that matches the background of the text. This covers the ".txt" when the filenames are short and therefore not cut off with overflow: hidden.

Note the padding-right: 22px, this pushes the ".txt" beyond the ellipsis.

Refer to examples 2 and 3 below for different methods with different browser support for each. It doesn't seem to be possible to hide the ".txt" happily in all browsers.

Example 2

Browser Compatibility: Chrome and Firefox.

The #fileName p::after is given a background color that matches the background of the text. This covers the ".txt" when the filenames are short and therefore not cut off with overflow: hidden.

Note the padding-right on each of the ::after pseudo-elements. padding-right: 22px pushes the ".txt" beyond the ellipsis and padding-right: 100% gives the covering pseudo-element its width. The padding-right: 100% doesn't work with Edge or IE 11.

#fileName {
  position: relative;
  width: 122px;
}

#fileName::after {
  content: attr(data-filetype);
  position: absolute;
  right: 0;
  top: 0;
}

#fileName p {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  padding-right: 22px;
}

#fileName p::after {
  content: '';
  background: #FFF;
  position: relative;
  padding-right: 100%;
  z-index: 1;
}

/*Show on hover*/

#fileName:hover {
  width: auto;
}


/*Hide .txt on hover*/

#fileName:hover::after {
  display: none;
}
<div id="fileName" data-filetype=".txt">
  <p>This is the big name of my file.txt</p>
</div>

<div id="fileName" data-filetype=".txt">
  <p>Short.txt</p>
</div>

Example 3

Browser Compatibility: IE 11, Edge and Chrome.

The content: ... unholy amount of ... on #fileName p::after gives it width. This, along with display: inline-block, is currently the only method that works on the Edge browser / IE 11 as well as Chrome. The display: inline-block breaks this method on Firefox and the .txt is not covered on short filenames.

#fileName {
  position: relative;
  width: 122px;
}

#fileName::after {
  content: attr(data-filetype);
  position: absolute;
  right: 0;
  top: 0;
  padding-right: 10px; /*Fixes Edge Browser*/
}

#fileName p {
  white-space: nowrap;
  overflow: hidden;
  padding-right: 22px;
  text-overflow: ellipsis;
}

#fileName p::after {
  content: '.........................................................................................................................';/*Fixes Edge Browser*/
  background: #FFF;
  position: relative;
  display: inline-block;/*Fixes Edge Browser*/
  z-index: 1;
  color: #FFF;
}


/*Show on hover*/

#fileName:hover {
  width: auto
}

#fileName:hover::after {
  display: none;
}
<div id="fileName" data-filetype=".txt">
  <p>This is the big name of my file.txt</p>
</div>

<div id="fileName" data-filetype=".txt">
  <p>Short.txt</p>
</div>

2
  • 4
    I wonder if this can be improved to support non-overflowing text. If filename.txt happens to be short and does not cause ellipsis to appear, the :after's txt is still going to show.
    – GSerg
    Commented Nov 5, 2015 at 12:57
  • 1
    @GSerg I have revised my answer (quite a long time later) with an improved solution that deals with this. Check it out in my answer above :) Commented Jan 11, 2019 at 4:00
15

This is the best I can come up with... It might be worthwhile trying to clean up the leading edge of the second span...

CSS

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

HTML

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

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

2
  • very interesting solution ! Commented Mar 10, 2017 at 21:46
  • Not very useful in case the text can be either short or long Commented Jan 18, 2021 at 15:11
12

Here is another suggestion that worked well for me:

<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;"> Her comes very very very very very very very very very very very very very very very very very very very long </div>
   <div style="flex: 1 0 content;white-space:nowrap;"> &nbsp;but flexible line</div>
</div>
3
  • 2
    I like that approach. Created a fiddle and cleaned it up a bit + removed that flex-basis: content; as its support isn't great atm. link
    – Daniel Z.
    Commented Sep 28, 2018 at 8:50
  • Took me a while to get this working with wkhtmltopdf (old webkit) as the autoprefixer did it's job but the values were in the wrong "order". So here's another fiddle with a version working with wkhtmltopdf 0.12.4 link
    – Daniel Z.
    Commented Sep 28, 2018 at 12:24
  • Should use "white-space: pre;" instead, else the last space character will not be preserved when shown in the browser between 2 <div>s
    – Andrew See
    Commented Mar 6, 2019 at 6:38
8

Here's a solution that uses flexbox, and is dynamic, (e.g. works when the user resizes the browser window). Disadvantage is that the text after the ellipsis has a fixed size, so you can't put the ellipsis in the exact middle 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>

Resize the right-hand side boxes on jsfiddle to see the effect:

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

If you're willing to abuse direction: rtl, you can even get the ellipsis right in the middle of the text with some small changes to 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 see an animated gif of what this looks like on https://i.sstatic.net/CgW24.gif.

Here's a jsfiddle showing this approach:

https://jsfiddle.net/b8seyre3/

1
  • Solid answer! Was able to solve a third party component with this solution, although I had to add min-width: 0 to ancestors and other trickery Commented May 13, 2022 at 22:17
2

I tried some of those CSS approach but the problem is if the text is short, you will get "short text short text" instead of "short text".

So I went with CSS + JS approach. JS (I edited Jeremy Friesen's to fix some cases):

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;
}

HTML:

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

CSS:

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

I hope it helps. Sorry for the format. This is my first answer on SO.

0
1

JavaScript option:

var cropWithExtension = function(value, maxChars, trailingCharCount) {
    var result = value;

    if(value.length > maxChars){
        var front = value.substr(0, value.length - (maxChars - trailingCharCount - 3));
        var mid = "...";
        var end = value.substr(-trailingCharCount);

        result = front + mid + end;
    }

    return result;
}

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

Input ---This is a very very very very very big file.txt

To truncate the above file name use the below javascript

Output ---This is a very...big 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:

**Pass the $scope.referenceFileName in the json---back end

$scope.fileName this would be---front end

1
  • This is another suggestion
    – user007
    Commented Feb 3, 2017 at 7:24
0

The accept answer is good. Although for Browser Compatibility, you could do the detection for truncate or not. Make the whole CSS conditional.

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

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

I found out the css solutions quite buggy and hard to maintain, since you need to add attributes or elements to separate text.

I built a quite straight forward Javascript that handles it. Send your text and max length of the text and you get the text truncated in the middle back.

const truncateMiddle = (text, maxCharacters) => {
  const txtLength = text.length; // Length of the incoming text
  const txtLengthHalf = maxCharacters ? Math.round(maxCharacters / 2) : Math.round(txtLength / 2); // set max txtHalfLength
  return text.substring(0, (txtLengthHalf -1)).trim() + '...' + text.substring((txtLength - txtLengthHalf) + 2, txtLength).trim() //Return the string
}

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

Returns: Once...nny

Cons? Sure, it need more functionality to be responsive.

0

CSS is good, but I think you must do it by JavaScript for more accurate results. Why? Because, with JS You can control number of first and last texts of words. This is just 2 lines of JavaScript code to crop string as per you define:-

    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>

also, you can choose first n words, instead of first few letter/characters with JS, as per you want. whose JS code is this:-

    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>

0

My answer:

.outer-container {
  border: 1px solid black;
  width: 80vw;
  margin: 8px;
}

.text-container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.left-span {
  white-space: pre;
  overflow: hidden;
  max-width: 50%;
  text-overflow: ellipsis;
}

.right-span {
  white-space: pre;
  overflow: hidden;
  max-width: 50%;
}
<div class="outer-container">
  <div class="text-container"><span class="left-span">A long string that is long and bla bla bla b</span><span dir="rtl" class="right-span"><span dir="ltr">la bla bla bla bla bla and now it's the end.</span></span>
  </div>
</div>

in react:

const TruncateMiddle = ({children: text}: {children: string}) => {
  const halfwayIndex = Math.floor(text.length / 2);
  const firstHalf = text.slice(0, halfwayIndex);
  const secondHalf = text.slice(halfwayIndex);
  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'flex-start',
      }}
      title={text}
    >
      <span
        style={{
          whiteSpace: 'pre',
          overflow: 'hidden',
          textOverflow: 'ellipsis',
          maxWidth: '50%',
        }}
      >
        {firstHalf}
      </span>
      <span
        dir="rtl"
        style={{
          whiteSpace: 'pre',
          overflow: 'hidden',
          maxWidth: '50%',
        }}
      >
        <span dir="ltr">{secondHalf}</span>
      </span>
    </div>
  );
};

export default function App() {
  return (
    <div
      style={{
        border: '1px solid black',
        width: '80vw',
        margin: '8px',
      }}
    >
      <TruncateMiddle>
        A long string that is long and bla bla bla bla bla bla bla bla bla and
        now it's the end.
      </TruncateMiddle>
    </div>
  );
}
-1

For a solution that works with liquid layouts I came up with something that uses flexbox. Obvious drawback is that three elements are needed. Obvious advantage: If there is enough room everything will be shown. Depending on circumstances an additional white-space rule for the paragraph might be needed as well as some min-width for the first span.

<p><span>Long text goes in here except for the</span><span>very end</span></p>

p {display:flex}
p span:first-child {flex-shrink:1; text-overflow: ellipsis; overflow: hidden}

ADDENDUM: Strictly speaking, the flex-shrink is not even necessary because it is the default behaviour of the flex-items anyway. This is not so in IE10, however. Prefixing is necessary, too in this case.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.