Javascript 用剩余的空格截断字符串

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

• div“main”具有固定宽度（表示200px）

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

=>我希望div“part2”中的文本宽度与div“main”less div“part1”（剩余空间）的宽度相同

例：

我试过了，但没用：

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

---

这不需要JavaScript，可以通过样式完成。将part1和part2的css更改为display:inline

.part1,.part2
{
    display:inline;
}

---

使用

Thinking Sites

的

display:inline

和

epascarello

建议的椭圆样式，这个完整的解决方案现在可以工作了：

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

.part1, .part2{
    display: inline;
}

---

请参见

如果父级具有固定宽度，且元素的宽度和宽度是内联的，而不是块，则如何。@epascarello:您应该添加您的注释作为对未来用户的回答，然后我可以删除我的注释，我认为这更合适，因为您就是提到它的人。text-overflow:省略号不适用于所有浏览器（特别是firefox），这就是为什么如果可能的话我更喜欢JS解决方案的原因…@Anon：不确定你从哪里听说的，但根据文档，它似乎与FF兼容。我想文档有些过时了，因为它在最新的Chrome和IE中也能工作。正如我之前所说，文本溢出：省略号不适用于所有浏览器，JS解决方案y更好…@Anon:你能指出你必须支持的浏览器中，上述内容不起作用吗？我在最新版本的FF、Chrome和IE上测试了上述内容，它们都显示良好。如果某些CSS与浏览器不兼容，第一个调用端口应该是CSS解决方案。对于你试图做的事情，脚本解决方案应该最后一个选项。你说得对。它似乎可以工作，但现在我需要将“padding top:13px；”应用到“.part2”。现在的问题是“.part2”是“display:inline；”，我不能对它进行任何填充。@Anon:Your

.main

现在是数据行的样式。将

padding top:13px；

添加到

可以工作的
.main
样式。
.part1,.part2
{
    display:inline;
}

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

.part1, .part2{
    display: inline;
}