CSS Text Ellipsen und 100 Prozent Breite

Question

Ich habe den folgenden Container Text:

<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; 
} 

Ich möchte Text in voller Breite + Text-Überlauf machen: Auslassungszeichen. Also, wenn ich Browsergröße ändern alle title Divs sollte 100% Breite des Elternteils cardTitles mit Schnitt Text zu drei Punkten am Ende sein.

Ich fand, dass dies mit flex möglich ist. Hier ist die mögliche answer:

.parent-div { 
    display: flex; 
} 

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

    min-width: 0; 
} 

Aber das ist nicht für mich arbeiten. Der übergeordnete Container wird nicht mehr skaliert, wenn die maximale Länge eines untergeordneten Titels erreicht wird.

---

Sie können ein Beispiel finden Sie hier: http://88.198.106.150/tips/cpp/

Try-Browser, um die Größe und Titel mit Text aussehen: What does it mean that a reference must refer to an object, not a dereferenced NULL pointer. Ich muss es überfüllen Ellipse.

Answer 1

Probieren Sie es aus. Hier

ist die link

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

Answer 2

#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; 
} 

Die folgenden zwei Divs enthält einen langen Text, der nicht in die Box passt. Wie Sie sehen können, ist der Text abgeschnitten.

Dieses div verwendet "text-overflow: clip":

Dies ist etwas langer Text, der nicht in der Box paßt

Dieses div "text-overflow: Auslassungszeichen": verwendet

Diese einige sind langen Text, der nicht in die Box passt

Answer 3

die Breite in Pixel hinzugefügt werden muss, arbeiten Prozentsatz gewohnt mit drei anderen entlang Eigenschaften wie unten angegeben: -

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