截斷的字符串與剩餘的空間

我有其中每個li元素包含一個格內部「主」兩個格的列表：截斷的字符串與剩餘的空間

格「主」具有固定的寬度（話說200像素），
格「part1的」具有可變的寬度（即，包含文本和圖像的）

=>祝文本格「第2部分」內有作爲寬度該div的「主」少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+"..."); 
    }); 
});

來源

2012-08-10 Anon

如何使用固定寬度的父項和[文本溢出：省略號]（http://www.quirksmode.org/css/textoverflow.html）並將元素寬度內聯而不是塊寬度。 – epascarello 2012-08-10 20:42:16

@epascarello：您應該添加您的評論作爲未來用戶的答案，然後我可以刪除我的，這會更合適我認爲你是提到它的人。 – Nope 2012-08-10 21:54:11

文本溢出：省略號不適用於所有瀏覽器（尤其是Firefox），這就是爲什麼我喜歡JS解決方案，如果可能的話... – Anon 2012-08-10 23:27:28

使用Thinking Sites的答案的display: inline和橢圓風格由epascarello所建議的這個完整的解決方案將現在的工作：

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

.part1, .part2{ 
    display: inline; 
}

見DEMO

來源

2012-08-10 20:55:17 Nope

正如我之前所說，text-overflow：ellipsis不適用於所有瀏覽器，JS解決方案可能會更好... – Anon 2012-08-10 23:28:21

@Anon：您能否指出您必須支持的瀏覽器，以上操作無效？我在最新版本的FF，Chrome和IE上測試了上述內容，並且它們都顯示正常。如果某些CSS與瀏覽器不兼容，則第一個端口應該是CSS解決方案。對於你想要做的腳本解決方案應該是最後一個選項。 – Nope 2012-08-10 23:47:47

你說得對，它似乎工作，但現在我需要應用「padding-top：13px;」到「.part2」。現在的問題是「.part2」是「display：inline;」我不能做任何填充。 – Anon 2012-08-11 00:30:47

你不需要的JavaScript這一點，可以用樣式完成。更改CSS的第1部分和第2部分，以顯示：內聯

.part1,.part2 
{ 
    display:inline; 
}

來源

2012-08-10 20:42:09

截斷的字符串與剩餘的空間

回答

相關問題