CSS text puntini di sospensione e il 100 per cento di larghezza

Question

ho il seguente contenitore di testo:

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

voglio fare testo completo larghezza + text-overflow: puntini di sospensione. Quindi quando ridimensiono il browser tutte le div title devono essere piene al 100% della larghezza del genitore cardTitles con il testo tagliato a tre punti alla fine.

Ho scoperto che questo è possibile utilizzando flex. Ecco il possibile answer:

.parent-div { 
    display: flex; 
} 

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

    min-width: 0; 
} 

Ma questo non funziona per me. Il contenitore principale smette di ridimensionarsi quando raggiunge la lunghezza massima di un titolo figlio.

---

È possibile trovare un esempio qui: http://88.198.106.150/tips/cpp/

tenta di ridimensionare il browser e guardare titolo con il testo: What does it mean that a reference must refer to an object, not a dereferenced NULL pointer. Devo farcela con i puntini di sospensione.

Answer 1

Provalo.

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

I seguenti due div contengono un testo lungo che non si adatta alla confezione. Come puoi vedere, il testo è troncato.

Questa div utilizza "text-overflow: Clip":

Questo è un testo lungo che non si adatta nella casella

Questa div utilizza "text-overflow: puntini di sospensione":

Questo è un po ' lungo testo che non si adatta nella casella

Answer 3

la larghezza deve essere aggiunto in pixel, percentuale non funzionerà insieme ad altri tre proprietà come indicato di seguito: -

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