0

我有一个列表，其中每个 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+"...");
  });
});
4

2 回答 2

1

你不需要 JavaScript，它可以用样式来完成。将 part1 和 part2 的 css 更改为 display:inline

.part1,.part2
{
    display:inline;
}
于 2012-08-10T20:42:09.370 回答
1

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

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

.part1, .part2{
    display: inline;
}

见演示

于 2012-08-10T20:55:17.847 回答