我的产品遇到了文本溢出的情况。我们需要剪掉中间的文字。
我想尽可能少地使用 JavaScript。网上有一些建议。其中大多数包括在 JavaScript 中将字符串分成两部分，然后text-overflow ellipsis在一侧使用，text-overflow: clip在另一侧与direction:rtl
这对我来说听起来像是一个很好的解决方案。但是，当我尝试实施此解决方案时，我意识到即使在特定字符的中间，也可以在文本中间剪切右侧文本。
所以我的问题是一侧很好。但是，另一个可能在中间切了一个不好看的字母。所以我想如果我在两边都使用省略号会怎样。现在，中间没有字母被剪掉，但我... ...在文本中间剪掉了。我说如果我在右侧使用负左边距会怎样。这解决了这个问题，但是当我的句子太小而不能省略时，这两个部分相互重叠。所以我让容器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您需要修复.- 如果它在第 2 部分的开头，则将其添加到第 1 部分的末尾，如果它在第 2 部分的末尾，则将其添加到第 2 部分的开头。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句