Question

我的产品出现了文字溢出的情况。我们需要在中间剪切文本。

我希望尽可能减少使用JavaScript。网上有一些建议。其中大多数包括在JavaScript中将字符串拆分为两部分，然后在一侧使用text-overflow ellipsis，在另一侧使用text-overflow: clip以及direction:rtl

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

Answer 1

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

现在你需要做的就是用JavaScript将句子分成两部分。好... 因为正确的部分是rtl，你需要修复. - 如果它在part2的开头，将它添加到part1的末尾，如果它在part2的末尾，则将它添加到第2部分的开始。

省略句在句子的中间

1 个答案: