CSS裁剪字符串在中间 [英] CSS crop string in the middle

问题描述

 < style>< p> 
 #fileName {
 width：100px; 
 white-space：nowrap; 
文本溢出：省略号; 
 overflow：hidden; 
} 
< / style> 
< div id =fileName>这是我的file.txt< / div>的重要名称
  

所以我有这个输出

这是... b

但我想保留文件扩展名并具有类似这样的

这是... le.txt

是否有可能只使用CSS？

编辑：

为了说明。由于我的文件始终是txt文件，因此我尝试使用text-overflow：string，但看起来像只适用于Firefox：

  text-overflow：'* .txt'; 
  

解决方案

这是一个干净的CSS解决方案，使用 data - * 属性和一个：在伪元素之后。我还添加了一个可选的悬停并显示所有文本（显示全文时需要删除伪元素后的：）。



工作示例

#fileName {position：relative; width：100px;}＃fileName p {white-space：nowrap;文本溢出：省略号; overflow：hidden;}＃fileName：after {content：attr（data-filetype）;位置：绝对;左：100％; top：0;} / *在悬停时显示* /＃fileName：hover {width：auto} #fileName：hover：after {display：none; }

< div id =fileNamedata-filetype = TXT > < p>这是我的file.txt的大名字< / p>< / div>

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?

Edit:

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

 text-overflow: '*.txt';

解决方案

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

Working Example

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

这篇关于CSS裁剪字符串在中间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！