javascript - 句子中间的省略号

Question

我的产品遇到过文本溢出的情况。我们需要在中间剪切文本。

我想尽可能少地使用 JavaScript。 网上有一些建议。其中大部分包括在 JavaScript 中将字符串分成两部分，然后在一侧使用 text-overflow ellipsis 并在另一侧使用 text-overflow: clip 以及 方向:rtl

这对我来说听起来是个不错的解决方案。 但是，当我尝试实现此解决方案时，我意识到即使在特定字符的中间，也可以在文本中间剪切右侧文本。

Answer 1

所以我的问题是一侧没问题。但是，另一个可能在中间切了一个字母，看起来不太好。 所以我想如果我在两边都使用省略号会怎么样。现在，中间没有字母被剪掉，但我在文本中间有 ... ... 。 我说如果我在右侧使用负左边距怎么办。这解决了这个问题，但是当我的句子太小而不能省略时，两个部分相互重叠。 所以我让容器 display: flex 添加了一个带有宽度和 flex-shrink 的中间元素以及带有 flex-grow:1 的尾部元素。

.container {
  display: flex;
  white-space: nowrap;
  overflow: hidden;
}

.part1, .part2 {
  overflow: hidden;
  display: inline-block;  
  text-overflow: ellipsis;  
  flex-shrink: 1;  
}


.part2 {
  direction: rtl;
  margin-left: -20px
}

.end {
  flex-grow: 1; 
}

.mid{  
  width: 20px;
  flex-shrink: 10;
}

<div class="container">
  <div class="part1">This is the first part of the sentence i</div><div class="mid"></div><div class="part2">t is a very long senetense that we want to split</div><div class="end"></div>
</div>

现在您只需在 JavaScript 中将句子分成两部分即可。 出色地... 因为正确的部分是 rtl 你需要修复 . - 如果它在 part2 的开头，将它添加到 part1 的末尾，如果它在末尾第 2 部分的将其添加到第 2 部分的开头。