截断带有剩余空格的字符串

Truncate a string with the remaining space

本文关键字：空格 字符串 余空格      更新时间：2023-09-26

我有一个列表，其中每个li元素在一个div"main"中包含两个div：

  • div "main" 有一个固定的宽度（说 200px），

  • div "part1" 具有可变宽度（包含的文本和图像的宽度）

=>我希望div "part2" 中的文本具有与div "main" 的宽度一样少div "part1"（剩余空间）

前任：

...
<li>
   <div class="main">   
          <div class="part1">A</div>
          <div class="part2">BlaBlaBla</div>
   </div>   
</li>
<li>
   <div class="main">   
          <div class="part1">ABC</div>
          <div class="part2">BlaBlaBla</div>
   </div>   
</li>
<li>
   <div class="main">   
          <div class="part1">ABCDE</div>
          <div class="part2">BlaBlaBla</div>
   </div>   
</li>
...

它应显示：

A BlaBla...
ABC BlaB...
ABCDE Bl...

我试过了，但它不起作用：

$(function(){
  $(".part1").each(function(){
    var $this = $(this);
    var $len = 0;
    var $len = $this.outerWidth();
    var $lenParent =$this.parent().outerWidth();        
    var newText2 = $this.next('.part2').text().substring(0,$lenParent-$len); 
    $this.next('.part2').innerHtml(newText2+"...");
  });
});

使用 Thinking Sites 的答案display: inline和 epascarello 建议的椭圆样式，这个完整的解决方案现在可以工作：

.main{
    width: 100px;
    border: 1px solid red;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.part1, .part2{
    display: inline;
}

查看演示

你不需要

JavaScript，它可以通过样式来完成。 将第 1 部分和第 2 部分的 css 更改为显示：内联

.part1,.part2
{
    display:inline;
}
相关文章：