CSS文本省略號和100％的寬度

我有文字的以下容器：CSS文本省略號和100％的寬度

<div class="cardTitles"> 

<div class="title"> 
    <div class="titleContent"> 
     <i class="fa fa-star-o"></i> 
     <b>Some long long long title here</b> 
     <a href="some href"></a> 
    </div> 
</div> 

... title divs ... 

</div>

CSS：

.cardTitles { 
    width: 100%; 
    height: 100%; 
} 

.title 
{ 
    position: relative; 

    padding-top: 8px; 
    padding-bottom: 8px; 
}

我要讓文字全寬+文本溢出：省略號。所以，當我調整瀏覽器的全部title div應該是完整的父母cardTitles的100％寬度與最後三個點的剪切文本。

我發現這可以使用flex。下面是可能answer：

.parent-div { 
    display: flex; 
} 

.text-div { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis;  

    min-width: 0; 
}

但是，這並不爲我工作。父容器在達到某個子標題的最大長度時會停止調整大小。

您可以在這裏找到一個例子：http://88.198.106.150/tips/cpp/

嘗試調整瀏覽器，並期待在標題文本：What does it mean that a reference must refer to an object, not a dereferenced NULL pointer。我需要使溢出省略號。

來源

2014-12-05 Ockonal

試試看。

這裏是link

.titleContent{ 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

來源

2014-12-05 11:26:46 Aakash

標題中有文字：'這是什麼意思，引用必須引用一個對象，而不是一個取消引用的空指針'。嘗試調整瀏覽器大小，你會看到結果 – Ockonal 2014-12-05 11:57:13

你必須在定位標記上應用省略號屬性 – Aakash 2014-12-05 12:24:58

它沒有幫助我:(當我只是在titleContent中留下文本時，它無法正常工作 – Ockonal 2014-12-05 14:41:24

#div1 { 
    white-space: nowrap; 
    width: 12em; 
    overflow: hidden; 
    text-overflow: clip; 
    border: 1px solid #000000; 
} 

#div2 { 
    white-space: nowrap; 
    width: 12em; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    border: 1px solid #000000; 
}

以下兩個div包含長框文本，不適合框中。正如你所看到的，文本被剪輯。

這個div使用「文本溢出：夾」：

這是將不適合在框中一些長文本

這個div使用「文本溢出：省略號」：

這是一些，將不適合在框中

來源

2014-12-05 11:31:58

寬度需要以像素爲單位添加長文本，比例不會隨着其他三個工作屬性，如下所示： -

.text-ellipsis{ 
    max-width: 160px; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

來源

2015-10-26 10:20:43 Nitesh

不幸的是，這種殺死響應式設計。:( – user959690 2017-02-14 22:34:50

CSS文本省略號和100％的寬度

回答

相關問題