javascript - 附加到由文本溢出省略号缩短的字符串

Question

我想干净地显示一个用引号中的省略号缩短的字符串，例如，该字符串是一个不应该完全显示的长句，显示为 "a long sentence..."。

但是，当我使用 text-overflow: 提供的省略号时，它将呈现为 "a long sentence... "。可以做些什么来删除省略号中包含的额外空间？

Answer 1

示例直接取自此处:text-overflow

我删除了段落上的填充。如您所见，没有“额外空间”

p {
  width: 200px;
  border: 1px solid;
  padding: 0;

  /* BOTH of the following are required for text-overflow */
  white-space: nowrap;
  overflow: hidden;
}

.overflow-visible {
  white-space: initial;
}

.overflow-clip {
  text-overflow: clip;
}

.overflow-ellipsis {
  text-overflow: ellipsis;
}

.overflow-string {
  /* Not supported in most browsers, 
     see the 'Browser compatibility' section below */
  text-overflow: " [..]"; 
}

<p class="overflow-visible">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p class="overflow-clip">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p class="overflow-ellipsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p class="overflow-string">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>