html - 中间的 CSS 裁剪字符串

Question

我使用 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>

所以我有这个输出

This is the bi...

但是我想保留文件扩展名，有这样的东西

This is the... le.txt

是否可以只使用 CSS？

因为我的文件总是 txt，所以我尝试使用 text-overflow: string，但它看起来只适用于 Firefox:

 text-overflow: '*.txt';

Answer 1

这是一个干净的 CSS 解决方案，使用 data-* attribute和两个 ::after 伪元素。我还添加了一个可选的悬停并显示所有文本(显示全文时需要删除 #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 被赋予与文本背景匹配的背景颜色。当文件名很短且因此不会被 overflow: hidden 截断时，这会覆盖“.txt”。

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

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

例子2

浏览器兼容性:Chrome 和 Firefox。

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

注意每个 ::after 伪元素上的 padding-right。 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>