时间戳

首页 > 解决方案 > 固定跨度双重外观和字母切割

javascript - 固定跨度双重外观和字母切割

问题描述

你好，我正在尝试使跨度允许我在中间修剪太长的单词：

像这样

但问题是如果单词很长，字母会在中间被剪掉：

例子

如果这个词很短，它会出现两次：

示例2

CSS：

#attachmentfile span {
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
}

#attachmentfile span:first-child {
    width: 50%;
    text-overflow: ellipsis;
}

#attachmentfile span + span {
    width: 50%;
    direction: rtl;
    text-align: right;
}

html:

<span>
    {{Att}}
</span>
<span>
    {{Att}}
</span>

示例：http: //jsfiddle.net/c8everqm/1/

标签： javascripthtmljquerycssfrontend

解决方案

CSS：

#fileName span {
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
}

#fileName span:first-child {
  width: 100px;
  text-overflow: ellipsis;
}

#fileName span + span {
  width: 1px;
  direction: rtl;
  text-align: right;
  text-overflow: ellipsis;
}

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>

多亏了freedomn-m这一点，我才找到了解决方案。

http://jsfiddle.net/ygqz3b5k/1/

推荐阅读