中间的CSS裁剪字符串

Question

我有一个很大的文件名,我正在使用CSS文本溢出:省略号.

<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-*属性和两个::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

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

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 3

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

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

这是一个使用flexbox，并且是动态的解决方案（例如，当用户调整浏览器窗口大小时有效）。缺点是省略号后面的文字是固定大小的，所以不能把省略号放在文字的正中间。

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>

调整 jsfiddle 右侧框的大小以查看效果：

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

如果您愿意滥用direction: rtl，您甚至可以通过对 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;
}

你可以在https://i.stack.imgur.com/CgW24.gif上看到这个样子的动画 gif 。

这是一个展示这种方法的jsfiddle：

https://jsfiddle.net/b8seyre3/