Question

我有一个很大的文件名，我使用css text-overflow：省略号进行裁剪。

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

所以我有这个输出

这是双...

但是我想保留文件扩展名并有类似的东西

这是...... le.txt

是否只能使用CSS？

由于我的文件始终是txt，我尝试使用text-overflow: string，但它看起来只适用于Firefox：

 text-overflow: '*.txt';

Answer 1

这是一个使用data-* attribute和两个::after伪元素的干净CSS解决方案。我还添加了一个可选的悬停并显示所有文本（显示全文时需要删除#fileName::after伪元素。）

示例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>

更进一步 - 在文件名很短时隐藏附加的文件类型

#fileName p::after的背景颜色与文本背景相匹配。当文件名很短时，它会覆盖“.txt”，因此不会被overflow: hidden切断。

注意padding-right: 22px，这会将“.txt”推到省略号之外。

请参阅下面的示例2和3，了解不同的方法，每种方法都有不同的浏览器支持。似乎不可能在所有浏览器中愉快地隐藏“.txt”。

示例2

浏览器兼容性： Chrome和Firefox。

#fileName p::after的背景颜色与文本背景相匹配。当文件名很短时，它会覆盖“.txt”，因此不会被overflow: hidden切断。

注意每个padding-right伪元素的::after。 padding-right: 22px将“.txt”推到省略号之外，padding-right: 100%为覆盖伪元素提供宽度。 padding-right: 100%无法与Edge或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>

示例3

浏览器兼容性： IE 11，Edge和Chrome。

content: ... unholy amount of ...上的#fileName p::after给它宽度。这与display: inline-block一起，是目前唯一适用于Edge浏览器/ IE 11以及Chrome的方法。 display: inline-block在Firefox上中断了此方法，短文件名中不包含.txt。

#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>

Answer 2

这是另一个对我有用的建议：

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

Answer 3

这是我能想到的最好的......尝试清理第二个跨度的前沿可能是值得的......

<强> 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/

Answer 4

这是一个使用flexbox的解决方案，并且是动态的（例如，当用户调整浏览器窗口大小时起作用）。缺点是省略号后面的文本具有固定大小，因此您无法将省略号放在文本的正中间。

CSS

usingTwoElements

HTML

withList2

调整jsfiddle上的右侧框以调整效果：

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

如果你愿意滥用方向：rtl ，你甚至可以在文本的中间部分找到省略号，并对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;

}

您可以在https://i.stack.imgur.com/CgW24.gif上看到动画的GIF动画。

这是一个显示这种方法的小提琴手：

https://jsfiddle.net/b8seyre3/

Answer 5

JavaScript选项：

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

Answer 6

输入---这是一个非常非常非常非常大的文件.txt

要截断上述文件名，请使用以下javascript

输出---这是一个非常...大的文件.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;

**

注意：

**在json --- back end

中传递$ scope.referenceFileName

$scope.fileName这将是---前端

Answer 7

我尝试了一些CSS方法，但是问题是如果文本很短，您将获得“文本短文本”而不是“文本短”。

所以我采用了CSS + JS方法。 JS（我编辑了杰里米·弗里森（Jeremy Friesen's）来修复某些情况）：

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

我希望它会有所帮助。抱歉，该格式。这是我对SO的第一个答案。

Answer 8

接受答案是好的。尽管出于浏览器兼容性的考虑，您可以检测是否截断。使整个CSS成为条件。

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

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

Answer 9

我发现 css 解决方案非常有缺陷且难以维护，因为您需要添加属性或元素来分隔文本。

我构建了一个非常简单的 Javascript 来处理它。发送您的文本和文本的最大长度，您会在中间截断文本。

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

返回：一次...nny

缺点？当然，它需要更多功能才能响应。

Answer 10

CSS 很好，但我认为你必须通过 JavaScript 来实现更准确的结果。为什么？因为，使用 JS 您可以控制单词的第一个和最后一个文本的数量。这只是 2 行 JavaScript 代码来根据您的定义裁剪字符串：-

    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>

此外，您可以根据需要选择前 n 个单词，而不是 JS 的前几个字母/字符。其JS代码是这样的：-

    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>

Answer 11

对于使用液体布局的解决方案，我想出了一些使用flexbox的东西。明显的缺点是需要三个元素。明显的优势：如果有足够的空间，一切都会显示出来。根据具体情况，可能需要该段落的额外空白规则以及第一个跨度的一些最小宽度。

<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：严格来说，甚至不需要flex-shrink，因为它无论如何都是flex-items的默认行为。然而，在IE10中并非如此。在这种情况下，前缀也是必要的。

中间的CSS裁剪字符串

11 个答案:

示例1

更进一步 - 在文件名很短时隐藏附加的文件类型

示例2

示例3

CSS

HTML