無法獲取CSS省略號

我對整個響應式網頁設計非常陌生，我正在構建簡單的待辦事項應用程序以學習angularJS。我現在遇到的麻煩是如何處理太長的文本，並打破布局。無法獲取CSS省略號

在這裏你可以看到它是如何打破。 enter image description here

enter image description here

的HTML CSS &現在是：

注：這是包裹着<div class="span12">

<li> 
    <div> 
     <span class="taskshorter">{{t.TaskName}}</span> 
     <div class="pull-right"> 
      <span class="label label-info ">{{t.EstimatedTime}}</span> 
      <span class="label label-important">{{t.EstimatedTimeLeft}}</span> 
      <i class="icon-chevron-right"></i> 
     </div> 
    </div> 
</li>

和CSS

.taskshorter { 
    overflow: hidden; 
    white-space: nowrap; 
    -ms-text-overflow: ellipsis; 
    text-overflow: ellipsis; 
    width: 20px; 
    height: 1.2em; 
}

但似乎並不奏效。我應該寫javascript代碼來剪輯文本還是我錯過了可以輕鬆修復的內容？

此外，我正在使用Twitter boostrap流體佈局。

來源

2013-05-02 ArniReynir

你想用溢出做什麼？只是把它剪掉或者把文字包起來？第一個可能非常簡單，第二個有點複雜。 – 2013-05-02 14:12:24

只要切斷它，不要打破布局。 – ArniReynir 2013-05-02 14:13:01

您不能在內聯元素上設置width。將display:inline-block添加到CSS。

來源

2013-05-02 14:18:08

就像一個魅力工作，謝謝。 – ArniReynir 2013-05-02 14:39:40

一個不太乾淨但簡單的解決方法是將正確的元素賦予與主頁相同的背景。

.pull-right { 
    background-color: blue; /* your bg color */ 
    float: right; 
    box-shadow: -2px 0 4px blue; /* just for smoother "cut" */ 
}

我沒有測試過，可能需要更多的調整。如果你把一個例子放入JSFiddle中，我可以調整它。

來源

2013-05-02 14:18:20

無法獲取CSS省略號

回答

相關問題