0

各li要素に1つのdiv「main」内に2つの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: inlineしThinking 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 に答える