html - 带有文件扩展名的文本溢出省略号

Question

我正在制作上传功能。我必须显示刚刚上传的文件的名称。

File Name.txt

但是名字太长的时候会这样显示

File Name Is Too Long...txt

我尝试使用省略号

.file-name {
 overflow: hidden;
 text-overflow: ellipsis
}

但我不知道文件扩展名。

标签： htmlcss

Answer 1

设法使用flex提出了这个：

.filename {
  max-width: 200px;
  display: flex;
}

.name {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

<div class="filename">
  <span class="name">File Name Is Too Long.</span>
  <span class="extension">txt</span>
</div>
<div class="filename">
  <span class="name">This filename is also too long.</span>
  <span class="extension">txt</span>
</div>