Question

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

div“main”具有固定宽度（说200px），
div“part1”具有可变宽度（包含文本和图像的宽度）

=＆GT;我希望div“part2”中的文字宽度为div“main”减去div“part1”（剩余空间）

EX：

...
<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+"...");
  });
});

Answer 1

您不需要JavaScript，可以使用样式。更改part1和part2的css以显示：inline

.part1,.part2
{
    display:inline;
}

Answer 2

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

epascarello

请参阅DEMO

用剩余空格截断一个字符串

2 个答案: