如何用点从中心隐藏长文本(例如:像我的文件一样.n.jpg)

Question

如何使用"..."我想从中心修剪一些文本。

原文为：数字文档.pdf

将其转换为：数字...t.pdf

参考站点是http://compresspng.com/

Answer 1

css solution。

我使用简单的data-attribute和text-overflow: ellipsis;来实现您需要的效果。

这是片段：

#Dname {
  position: relative;
  width: 57px;
}
#Dname p {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
#Dname:after {
  content: attr(data-filetype);
  position: absolute;
  left: 100%;
  top: 0;
}

<div id="Dname" data-filetype="t.pdf">
  <p>digital document.pdf</p>
</div>

Answer 2

ES5

var string = 'digital document.pdf'
var shortenedString = string.substr(0, 7) + '...' + string.substring(string.length-5)

ES6

const string = 'digital document.pdf'
const shortenedString = `${string.substr(0, 7)}...${string.substring(string.length-5)}`

是

的，我知道答案是JS而不是CSS。但它会做需要做的事情，你可以只显示缩短的字符串。

Answer 3

如果您可以修剪字符串并添加...最后你可以使用像这样的CSS：

overflow: hidden;
text-overflow: ellipsis; 

如果你想像文件名开始...fileEnd.fileExtensionion 然后你可以使用 javascript 来做到这一点：

var file = 'testLnongName123456789123456789142.pdf';
var fileData = file.split(".");
// you can add the length check you want, i have added 10 for reference
if(fileData[0].length > 10){
    file = fileData[0].substring(1, 4) + '...' + fileData[0].slice(-4) + '.' + fileData[1]; 
}
console.log(file);

Answer 4

您要查找的可能是在文本溢出中称为ellipse的 css 属性。

例

.example {
    width: 10em; 
    overflow: hidden;
    text-overflow: ellipsis; 
}
<span class="example">This is my file name</span><span>.extention</span>

上面的示例所做的是创建一个宽度为 10em 的块，并允许最大大小的文本按原样显示，然后向其添加...。